Forums

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
    Posts
  • September 17, 2010 at 1:25 pm #30279
    tiagoroldao
    Member

    Hi guys! I need some help on this one.

    Check this image: http://i54.tinypic.com/2it5t2s.jpg

    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: http://www.pai.pt/displaystatic.ds?page=mapRegion

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

    September 17, 2010 at 3:48 pm #79533
    Bob
    Member

    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: http://www.w3schools.com/tags/tag_map.asp
    Basically, with image maps, you define a clickable area in an image by using coordinates.

    September 20, 2010 at 12:28 pm #79577
    tiagoroldao
    Member

    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?

    Thanks.

    September 20, 2010 at 3:20 pm #79585
    Bob
    Member

    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?

    September 20, 2010 at 4:10 pm #79589
    tiagoroldao
    Member

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

    September 20, 2010 at 6:52 pm #79594
    tiagoroldao
    Member

    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.

    September 21, 2010 at 12:07 pm #79394
    zackw
    Member

    watch Chris’s tutorial on making an image gallery with css, thats essentially what u want to do –
    https://css-tricks.com/video-screencasts/82-css-image-switcher/

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

    September 24, 2010 at 3:57 pm #79112
    tiagoroldao
    Member

    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.

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