Grow your CSS skills. Land your dream job.

CSS rollover image – USA Map

  • jon
    # October 3, 2008 at 3:33 pm

    Hey – thanks for looking.

    I need some serious help. I’m trying to make a map of the US with a rollover img for each state. IE: If you hover over NY then the state turns green. I made 50 different images with one state highlighted in each. How would i go about doing this?

    I have something like this right now:

    Code:
    #usa {
    width: 580px;
    height: 330px;
    background: url(http://www.intriguegraphics.com/demo…es/mapover.png) no-repeat;
    margin: 10px auto; padding: 0;
    position: relative;
    border: 2px solid #999;
    }
    #usa li {margin: 0; padding: 0; list-style: none; display: block; position: absolute;}

    #usa a {display: block; text-indent: -9999px; text-decoration: none;}

    #ny {
    left: 100px;
    top: 5px;
    width: 502px;
    height: 400px;
    z-index: 40;
    }
    #vt {
    left: 511px;
    top: 51px;
    width: 15px;
    height: 15px;
    z-index: 40;
    }
    #me {
    left: 528px;
    top: 8px;
    width: 50px;
    height: 54px;
    z-index: 40;

    }
    #fr {left: 81px; top: 116px; width: 134px; height: 133px;}
    #de {left: 186px; top: 72px; width: 80px; height: 108px;}
    #it {
    left: 227px;
    top: 176px;
    width: 114px;
    height: 143px;
    }
    #sz {left: 182px; top: 167px; width: 41px; height: 25px;}
    #aus {left: 209px; top: 153px; width: 77px; height: 35px;}
    #swe {left: 225px; top: 0px; width: 68px; height: 73px;}
    #nor {left: 199px; top: 0px; width: 50px; height: 38px;}
    #den {left: 214px; top: 38px; width: 35px; height: 45px;}

    #ny a {height: 300px;}
    #vt a {height: 30px;}
    #me a {height: 108px;}
    #fr a {height: 133px;}
    #de a {height: 108px;}
    #it a {height: 143px;}
    #sz a {height: 25px;}
    #aus a {height: 35px;}
    #swe a {height: 73px;}
    #nor a {height: 38px;}
    #den a {height: 45px;}

    .buk #ny a, #ny a:hover {background: url(images/maps/mapny.png) -0px -0px no-repeat;}

    but it doesnt seem to be working quite right.

    I tried doing one image that positioned itself differently on mouse over like this:

    Code:
    #vt a:hover {background: url(images/mapover.png) -557px -444px no-repeat;}
    #me a:hover {background: url(images/mapover.png) -565px -444px no-repeat;}
    #de a:hover {background: url(images/mapover.png) -186px -398px no-repeat;}
    #it a:hover {background: url(images/mapover.png) -187px -502px no-repeat;}
    #sz a:hover {background: url(images/mapover.png) -182px -1145px no-repeat;}
    #aus a:hover {background: url(images/mapover.png) -209px -806px no-repeat;}
    #swe a:hover {background: url(images/mapover.png) -225px -326px no-repeat;}
    #nor a:hover {background: url(images/mapover.png) -199px -978px no-repeat;}
    #den a:hover {background: url(images/mapover.png) -214px -691px no-repeat;}

    but it was like shooting in the dark – it took me like 20 minutes just align one state.

    Any tips or advice – i could use some serious help!!

    Thanks!
    Jon

    # October 3, 2008 at 4:19 pm

    Hmm. I’m not sure of a css way, but I made an image map a LONG LONG time ago that is similar to what you’re trying to do.
    Maybe Try: http://www.alistapart.com/articles/imagemap

    # October 7, 2008 at 5:13 am

    You can always use area coordinates. http://www.w3schools.com/TAGS/tag_area.asp

    Best Regards,
    Jake

    # October 7, 2008 at 4:52 pm

    The web uses blocks, rectangles if you will, for content. So unless your state is Wyoming (isn’t that a rectangle state?) you’d probably be best off with a solution other than CSS. You would have to have several layers and overlapping with absolute positioned images, it would be a pain.

    If I were you, I would use Flash.

    # October 7, 2008 at 6:58 pm

    My first thought was…

    Instead of a sprite containing 50 versions of the US, why not use 50 sprites each containing 2 normal and highlight versions of each state and use absolute positioning for each image?

    But the images would still be rectangular and overlap causing issues with selection. Personally, I think the best way is to use an image map. It will take a while to create but you don’t have to be exact. Even A large circular area in the center of each state would probably would very well.

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

You must be logged in to reply to this topic.

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