CODEWITHSUNDEEP
javascriptphpcssbuttonclick
Sara Fuerst
Sara Fuerst

Reputation: 6068

Changing Clickable Area of an Image without Resizing Image

I am currently working on a PHP/Javascript project where an action occurs when an image is clicked. The image is small, so I would like to expand the clickable area to further around the image without enlarging the image itself. Is this possible? Below is a general idea of the structure of what I'm working on. 

<g id="pictures">
 <image id="marker_image" cx="145" cy="460" r="1" preserveAspectRatio="none"
 x="136" y="451" width="18" height="18" 
 xmlns:xlink="http://www.w3.org/1999/xlink" 
 xlink:href="//link.thislink.com/image_assets/markers/pool.png" 
 style="opacity: 1" fill="#000000" fill-opacity="1" stroke="#000000" 
 stroke-opacity="1" stroke-width="2" stroke-linecap="round" stroke-
 linejoin="round"></image>
</g>

I'm new to working with SVGs, but from what I've read, I think I can use the <g> to add padding?

Upvotes: 0

Views: 499

Answers (1)

Jorel Amthor
Jorel Amthor

Reputation: 1294

Wrap you image in a div, make the div as big as you want using padding, and bind your action on the div instead of the img

Upvotes: 1

Related Questions