Making a rollover US map with CSS

[blowfly123]

I'm trying to make a map that you can rollover and highlight (and get pop-up information) and found a cool CSS method. However, there's one big problem which is that the hotspots have to be rectangles.

 

Here's the original site:

http://tinyurl.com/28rm6h

 

I'm trying to make a US version but what I was hoping to do was to have the hotspot only be a little rectangle in the middle of each state (or off to the side for smaller states) but still use CSS to overlay the image on the whole state, but I can't figure out how to do it.

 

Here's what I've made so far:

http://gi ==123== ljaw ==123== etz.com/wp/?p=13

(remove the " ==123== " bits)

 

Here's the CSS:

 

 

#us-map {

width: 611px;

height: 451px;

background: url(images/us-map.gif) no-repeat;

margin: 10px auto; padding: 0;

position: relative;

border: 2px solid #999;

}

#us-map li {margin: 0; padding: 0; list-style: none; display: block; position: absolute;}

 

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

 

#tx {left: 206px; top: 223px; width: 173px; height: 169px; z-index: 40;}

 

#tx a {height: 169px;}

 

 

.btx #tx a, #tx a:hover {background: url(images/us-map.gif) -206px -491px no-repeat;}

 

I want the #tx to just be the little box with TX in it but I want the hover to be bigger. Can it be done? Am I barking up the wrong tree? I feel like this could be a really cool way to do this especially since the CSS-styled list format would make it easy to incorporate into WordPress and stuff like that.

Edited March 25, 2009 by blowfly123

[blowfly123]

Two other possible options:

 

1) swap out the entire map for each rollover (kind of clunky)

2) make just the little rectangle hotspot highlight (not as sexy)

Thoughts?

Edited March 25, 2009 by blowfly123

[lm]

have you tried CSS play website to pick the ideas from?

[jlhaslip]

http://www.fegi.ru/geohtml/

 

It is an old software, but it works fine.

[blowfly123]

Thanks guys. The CSS Play maps are the same as mine, unfortunately: rectangular hotspots that only add the rollover content within the rectangle

 

The old software might be useful but I'll need to fire up my old PC to use it.

 

edit: i found some mac versions too... I'm starting to think that this isn't the way to do it though. 1998-style image maps are probably not where I want to go with it...

Edited March 25, 2009 by blowfly123