- This topic is empty.
-
AuthorPosts
-
September 17, 2010 at 1:25 pm #30279tiagoroldaoMember
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 #79533BobMemberWell 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 #79577tiagoroldaoMemberThanks 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 #79585BobMemberUse 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 #79589tiagoroldaoMemberIts exactly like that page, i didnt remember that i can use Firebug, thanks!
September 20, 2010 at 6:52 pm #79594tiagoroldaoMemberIm 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 #79394zackwMemberwatch 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 #79112tiagoroldaoMemberFinnaly, 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.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.