Cursor Pointer on transparent image
Hey, I was wondering if there was a way with css only to only show the cursor: pointer; if the mouse is hovering on the part of an image that is not transparent?
10 Replies
I think you can do this with
pointer-events if the image is an SVG: https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
there's also <map> but honestly I haven't used it in forever so I've long forgotten the details: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mapsvg is a better option
image maps are interesting, but arent responsive
my image is not an svg unfortunately
ill do it with canvas then
the worst of all options
you can make your image an svg by just wrapping it with an svg tag
that should work, as <img> and <image> are kinda like quasi-almost-nearly synonims
if it doesnt, use <image>
so i just do
<svg><img></svg>
?
or you mean i can save my image as a svg?
yes, just do the first one
if it doesnt work, use <image>
both <img> and <image> use the same basic set of attributes (src, width, height, ...) and you can position the <image> with x and y
on top of it, you can put a <link> with a shape
i think you can use a <path>
actually, its <a>, not <link>
Edit fiddle - JSFiddle - Code Playground
JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.
here, a very basic example showing a circle on top of the image
the circle is clickable, and has the cursor too
it's also perfectly responsive as well - try it
also, only the exact area of the circle is clickable
if you want to do something similar, you will need to use
fill="transparent"
it's black because it's the default color and it's visible on top of the imageah yes i get it now. Thanks for your time
you're welcome