blowfly123 Posted March 25, 2009 Report Share Posted March 25, 2009 (edited) 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 Quote Link to comment Share on other sites More sharing options...
blowfly123 Posted March 25, 2009 Author Report Share Posted March 25, 2009 (edited) 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 Quote Link to comment Share on other sites More sharing options...
lm Posted March 25, 2009 Report Share Posted March 25, 2009 have you tried CSS play website to pick the ideas from? Quote Link to comment Share on other sites More sharing options...
jlhaslip Posted March 25, 2009 Report Share Posted March 25, 2009 http://www.fegi.ru/geohtml/ It is an old software, but it works fine. Quote Link to comment Share on other sites More sharing options...
blowfly123 Posted March 25, 2009 Author Report Share Posted March 25, 2009 (edited) 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 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.