Make parts of image respond to hover

Make parts of image respond to hover
0

#1

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.


#2

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


#3

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.


#4

I remember seeing this post on stack overflow awhile back.


#5

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


#6

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


#7

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: