Make parts of image respond to hover

Hi, I’m starting out and trying to do a project, in which I want the page to feature a large image which would serve as a menu. In other words, hovering over parts of the image should make them light up / be colored, and clicking each part should lead to a different result. Now, the limitation is that I can only use HTML, CSS and JavaScript for now.
I realize that if I position invisible elements strategically behind the image and attach hover properties to them, that should solve the clickability issue. But is there a better way? And how do I solve the colors / lighting up bit? Is it possible using the tools at my disposal? Will appreciate any references, where to look / what to Google.

Depending on how complicated an animation must be I would go with SVG. You can combine it with a standard jpeg if you want

What I need is to attach links and pop-up explanations to different parts of the image, and if possible also have them change color on hover. Can you expand on the applicability of SVG? So far I’ve gotten as far as image maps and that’s not really working.

I remember seeing this post on stack overflow awhile back.

There are probably many methods how you can achieve this. One that I use from time to time is drawing SVG paths on top of a picture. After that you can simply animate them with CSS. As far as popup is concerned you can utilize Bootstrap tooltip for that or any other library of your choice. I created a simple demo for you so you can check the code and see one of the ways it can be done
DEMO
Hover over screen and 1,2,3 buttons to see the effects in action

1 Like

brilliant, thank you for taking the time to give me a demo, it really clears things up!

No problem. Also if you want to make links just wrap the paths with <a> tags. Just make sure they’re SVG compliant. Anchor in SVG looks like this:

<a xlink:href="http://www.my.url">
<!-- SVG ELEMENT-->
</a>

EDIT:
Actually I just checked the documentation here and it seems that xlink:href is deprecated so use just href like in HTML My knowledge is outdated :yum:

Hi @przemoo83, im trying to do something similar but my paths seems to stay fixed on the same spot upon resizing and the paths did not resize. I realized in your demo, your paths seem to resize and stick to the image upon resizing. May i know how did you achieve that? Sorry a beginner in svg here. Thank you.

Do you have height and width set to 100% on your svg tag?

@przemoo83 hey man, appreciate the reply. I did set the height and width at 100% but i finally managed to solve it. I was doing the svg in vue.js and it turns out vue did not accept inline svg values for its viewbox hence the coordinates did not scale accordingly.
Thanks once again :slight_smile: