HTML Image Map

[goalieman34]

Hello,
Here is the page I am working on. http://petrowest.squarespace.com/locations/
I would like to have some sort of interactive map so that when the user hovers over the names of the cities on the left sidebar they are highlighted on the map. Any help with getting started with this would be great.
Thanks everyone.

[amoss]

A simple way for modern browsers.
http://jsfiddle.net/Q2m5j/2/

[goalieman34]

@amoss thanks! is it possible to add images that pop up instead of the arrow?

[amoss]

Try content: url(image.jpg);

[goalieman34]

@amoss ok almost got it working. Just when I hover over the “Fort Nelson” on the left hand side it makes the rest of the cities in the list move down for some reason
http://petrowest.squarespace.com/locations/

[dfogge]

hey goalieman, the reason for the shift appears to be the mapmarker is positioned using “position: relative” which is bumping all the following content down to accomodate itself.

in your CSS try positioning your “:hover::after”‘s contents using “position: absolute” instead of “postion:relative”.

check out this post by mr coyier on his “ah-ha moment” relating to this. understanding how this works will help you go a long way towards understanding the “cascade.”

[goalieman34]

@dfogge Thanks for the help. When I change the position to absolute the image disappears, not sure why. The end result I am trying to achieve is to have the image stationary in location at all times and then show a hovering effect when highlighted on the sidebar.
Here is the page: http://petrowest.squarespace.com/locations/

[sliver37]

@goalieman34

You need to set a logical parent container to “position: relative” so that when you set “position: absolute” on each link, it will have the correct context.

For example the way your mark-up is currently, the #content would be a decent place to set “position: relative”.

What happens when you don’t explicitly set the new context on a parent is it uses the highest level it can find, all the way up to the body tag. (which is why your images appeared to be disappearing).

[goalieman34]

@sliver37 thanks for explaining things to me. I will have to try and research how to set a logical parent because i am really new to things and not totally sure. If you have time to show me what you mean that would be great. Ill try my best to solve it though right now.

[Author]

Posts