Map of US with rollovers?

[Jon101]

I'm looking to create an image of the US ( i already have it) and i want to set it up so if you hover over New York, lets say, the state turns yellow. How would i go about doing this? Can it be done using css? I would imagine i could do it without making each state a separate image with rollovers.

Thanks!

Please let me know if this isn't clear.


EDIT: Just to follow up - i know it can be done with CSS and here is a decent example i guess:
http://www.tanfa.co.uk/css/examples/europe-map.asp

Thanks!

Jon

[Medyman]

Yeah, the way in that example is the only way I could think of to do this. Note that the "hit" states aren't very accurate. It's the best you would be able to do with CSS alone.

Alternately, you could use an imagemap with CSS to accomplish this.

Does looking at the CSS (view-source:http://www.tanfa.co.uk/css/examples/europe.css) of that particular example enlighten you to the technique? Or were you looking for more guidance.

[Jon101]

I guess i need to study it a bit... would i need a rollover image for each of the states or could i just position a whole new map behind it and set the alignment for a rollover?

If i need to do each state, if i have like 50 some odd pieces how could i align them all up accurately?

Oh wait, i understand.. its one image with positioning....

Ok - how do i align everything up on the mouse overs? is it just playing with numbers until it works or is there a method to it?

Heres the image i made: http://intriguegraphics.com/demos/liberty/site/images/mapover.jpg


Now that i look at their image - do i need to seperate each state for the rollover instead of one solid image?

[Medyman]

Ok - how do i align everything up on the mouse overs? is it just playing with numbers until it works or is there a method to it?
No method. Just trial and error.


Now that i look at their image - do i need to seperate each state for the rollover instead of one solid image?
Yes, you do. You could create 50 different full maps with each state highlighted, but that would be a bit overkill.

[Jon101]

Allright, I made an image that seems to work - my only issue is its like finding a needle in a haystack to get it to line up... I'm either missing something or its ridiculously hard - especially to do it 50 times.

Maybe i am better off making 50 maps...

Any opinion?

Thanks again for all the help.

[Jon101]

How would the css look if i used a new map for each state? something like this?



#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: 459px;
top: 43px;
width: 55px;
height: 30px;
z-index: 40;
}
#vt {
left: 511px;
top: 51px;
width: 15px;
height: 15px;
z-index: 40;
}
#me {
left: 528px;
top: 8px;
width: 50px;
height: 54px;
}


#ny a:hover {background: url(images/mapover.png);}
#vt a:hover {background: url(images/mapover.png) ;}
#me a:hover {background: url(images/mapover.png) ;}


something like that?

I think its easier because right now i am completely guessing where each state is when I input
#vt a:hover {background: url(images/mapover.png) -557px -444px no-repeat;}

It's taking me like 20 minutes per state...