Change background of image maps on mouse hover

Question

Hi,

Iam new to CSS and Javascript. In my website I have an image as the navigation bar and have created hotspots to link them to different pages. The problem is since the text is a part of the image, I cannot change the style of the text on hover. Whereas I want the text/the hotspot to stand out on mouseover, so I learn the background color could be changed on mouse over. Is that possible? Is there a way to do that in CSS, using the area or maps. If Javascript is to be used, could someone help me out with it.

Thanks and Regards, Ron

Answer 1

Is there a reason you've used a single image as the nav bar?

Instead of a single image with hotspots, I'd use an individual image for each navigation link. That way you can easily change the image (or use CSS image positioning) on hover. This is described here:

http://css-tricks.com/video-screencasts/7-three-state-menu/

along with many other places I'm sure.

Answer 2

I don't think it's a good idea to use neither image maps nor individual images.

Instead, use CSS sprites: a single image file, add that as a background image to the menu links, but position the background images differently. See this Line 25 tutorial for more information.

Answer 3

There is a nifty JavaScript called mapper.js which is available here. It will allow you to highlight the hotspot upon mouse over. Not sure what else it does or how it may help you but its worth checking out.