Jump to content

Making a rollover US map with CSS


Recommended Posts

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:



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 by blowfly123
Link to comment
Share on other sites

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 by blowfly123
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...