-1

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.

Salman A
  • 262,204
  • 82
  • 430
  • 521
newtocss
  • 17
  • 1
  • 2
  • Since it is 2015 and majority of browsers support SVG, I would suggest using SVG maps instead of image maps. You can style the hotspots using... CSS. E.g. `svg a { fill: palegoldenrod; } svg a:hover { fill: papayawhip; }` – Salman A Apr 10 '15 at 17:40

2 Answers2

3

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.

Mike Edwards
  • 432
  • 2
  • 2
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.

Jacob Rask
  • 22,804
  • 8
  • 38
  • 36
  • That's what I meant by CSS image positioning, just didn't use the proper terminology, sorry. – Mike Edwards Sep 04 '09 at 13:27
  • Oh hold on, it's not quite the same. The technique is similar but has an individual image for each menu selection, containing the two versions of the image and three positions. Yours uses one image and alters horiz and vert offset. Must read on this some more. – Mike Edwards Sep 04 '09 at 13:32