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?
#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:
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
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.
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.
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:
#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:
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
Maybe Try: http://www.alistapart.com/articles/imagemap
Best Regards,
Jake
If I were you, I would use Flash.
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.