The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Links in MAP

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • #30279

    Hi guys! I need some help on this one.

    Check this image:

    I have some buttons on the left, each button is relative to one zone in the map. What i want: When the user hover the button ‘A’ i want to change the color of ‘A’ zone. And when user hover the ‘A’ zone in the map, i want to lighlight the ‘A’ link.

    Something like this:

    Whats the best way to do this?
    Thanks a lot.


    Well can’t you just do it same way that site does it? They use image maps, more info about that can be found here:
    Basically, with image maps, you define a clickable area in an image by using coordinates.


    Thanks Bob.

    I cant see the code on that page.. it apeears all in the same line.

    Anyway, im having difficult is how to lighlight the zone in the map on hover, not creating link in map. I have to do a different images that will appear on hover? or there is a easy method?



    Use Firebug to see the code properly.
    The demo page you linked to also has links in the map though, so is that the way you want it or not? What I mean is, do you want there to be a link in the map or a link on the buttons to subpages? Or dont you want links to subpages at all, just highlighting on hover?


    Its exactly like that page, i didnt remember that i can use Firebug, thanks!


    Im seeing the code but cant understand how its done :( A lot of confusing javascript.

    I already have the map image mapped with links, but how can i hightlight with yellow color, for example, the hovered zone in the map?

    And… beyond that, i want to highlight the respective button of that hovered map zone.

    Thanks Bob for your help.


    watch Chris’s tutorial on making an image gallery with css, thats essentially what u want to do –

    however, for how many different buttons and regions u have their i would suggest using Javascript unless your unfamiliar with it


    Finnaly, i did it, with jQuery.

    That’s the code. There is anyway i can reduce it?

    Dont know if its possible to apply same effect in more than one DIV, that would be great.

Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘CSS’ is closed to new topics and replies.