US Map with rollovers on states?

[Jon101]

Here's my CSS:


#usa {
width: 580px;
height: 330px;
background: url(http://www.intriguegraphics.com/demos/liberty/site/images/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;}

#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;}


I'm trying to set up each state with a mouse over. the way im doing it now theres like no way to know the coord's - its just hit or miss. Is there an easier way to do this or a method that i am missing?


Thanks!
Jon
(sorry if this is considered double posting)

[Irishcash33]

do you have a link to the page?

[Jon101]

http://intriguegraphics.com/demos/liberty/site/dealer.html

I'm playing around with it currently so if the style doesnt load or something just refresh.

Thanks for the help!

[Jon101]

Just to follow up - New York is the working state - well its not working but its using the approach I'm going to take. I just cant figure out how to make it fit right.

The rollover image either gets cutoff or doesnt show up at all.

Thanks!

[Irishcash33]

Google "hoverbox". play around with that. I think thats what you are looking for

[Jon101]

hoverbox is definitely cool, but not quite what i need - it does a different sort of effect.

I'm looking more for the roll-over transition that magnify.

Thanks though!

[eve55]

What do you mean by loads bg image? Are you trying to show a new background for the whole page?

[Jon101]

not quite... check out the page link and toss your mouse over ME or NH or MA - thats what im doing. i was just wondering if there was an easier way to do it than the way im doing it. I'm currently doing it with css like this : #vt a:hover {background: url(images/mapover.png) -552px -442px no-repeat;}