CSS rollover image – USA Map

[jon]

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

[Spunkmeyer]

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

[RhapX]

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

Best Regards,
Jake

[Cotton]

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.

[mikes]

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.

[Author]

Posts