Rollover image on image map

[craigp66009168]

Hi,

I have made an image map whereby when a user clicks on a certain section, they are taken to a certain website. There are seven sections in total.

I want to change my map, so when a user hovers over asection, it highlights that section and displays text, almost like a rollover image?

If anyone could intruct me on how to do this, it would be greatly appreciated!

Thanks!

[Jon Fritz · Accepted solution]

There are a lot of ways to do what you want, however image maps have fallen out of favor in most web design because they're totally unresponsive to a user's screen size, and since there's no mouse pointer to hover over your <area> tags on mobile devices, there's no rollover effect on anything mobile (over half of all online interactions are now on mobile).

You can make the image responsive, but the coordinates of the image map <area> don't change. On devices similar to your design environment, it will work. On larger or smaller devices, the links will be hidden or out of position.

If you absolutely must use an image map, it depends on the images being used as to how best to approach it. For example, if you're doing rollover regions on a vector map with links to individual pages, and you just want the background color to change, an SVG would be the way to go. If you have actual jpg or gif images, using a "responsive javascript image map" along with javascript rollovers attached to the <area> tags would work.

[WolfShade]

Use image sprites for the rollover effect, and you can place text inside the title attribute of the element containing the images which will display a tooltip on hover.

HTH,

^ _ ^