Search code examples
jqueryhtmlhoveronmouseoverimagemap

How can I make an image map gray out on hover, and restore color to hovered map areas while leaving the rest of the image gray?

I want to achieve this but I can't find a plugin that supports graying out the entire image except for the currently hovered area.

  1. Page loads and has an image map in full color.
  2. User mouses over the image map - just entering the image map grays out the whole image. Note that the map areas are not near the edge of the image. The image I need to use is a flowchart/workflow type of image.
  3. User keeps mousing and hovers over one of the map areas - that map area returns to full color while rest of image map stays gray.
  4. User can click the hovered, colored image area to take them to a new page explaining the portion of the image map they interacted with.

I can do image maps, I can do CSS, I can do a little jQuery, but I can't make this work. Help would be appreciated!

Solution

  • I solved this (a long time ago) by using CSS :hover to show the original image as the background of the hotspot while maintaining the image's positioning.