Grow your CSS skills. Land your dream job.

HTML Image Map

  • # June 18, 2012 at 2:33 am

    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.

    # June 18, 2012 at 8:59 am

    A simple way for modern browsers.

    http://jsfiddle.net/Q2m5j/2/

    # June 23, 2012 at 10:49 pm

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

    # June 23, 2012 at 11:13 pm

    Try content: url(image.jpg);

    # June 23, 2012 at 11:23 pm

    @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/

    # June 24, 2012 at 2:11 pm

    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.”

    # July 14, 2012 at 2:40 am

    @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/

    # July 14, 2012 at 9:56 pm

    @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).

    # July 14, 2012 at 10:13 pm

    @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.

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".