homepage Welcome to WebmasterWorld Guest from 54.167.182.201
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
how to make a world/country map with links for states/country
Sarah Atkinson

10+ Year Member



 
Msg#: 3803373 posted 2:36 pm on Dec 9, 2008 (gmt 0)

I'm wanting to create a visual selector for selecting a local area by having a user select the country from either a world map or a short list. then having them select a state to show all available locations within that state.. I am wondering how to do this would an image map be best? some sort of JavaScript? or my favorite a css funky rollover like this:
<snip>

any idea?

[edited by: swa66 at 3:00 pm (utc) on Dec. 9, 2008]
[edit reason] no URLs please, see forum charter [/edit]

 

swa66

WebmasterWorld Senior Member swa66 us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3803373 posted 3:01 am on Dec 11, 2008 (gmt 0)

I don't know a pure CSS way to make true image maps react on hovering of the separate areas defined in them (if that is what you seek).

Try the javascript folks, they might have what it takes.

But if you just seek to have hovering over rectangular areas, well then we might do something for you, provided you don't actually use an image map in the html but more something like a list of links. But the biggest requirement is that you can only use rectangles as areas. For a world map that might or might not cut it: up to you to decide.
It does support overlapping areas

An example using pure CSS:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>untitled</title>
<style type="text/css">
* {
padding:0;
margin:0;
}
#imagemap {
position:relative; /* to make sure it has position */
background-image: url(2.jpg);
width: 800px; /* size of the iamge */
height: 400px;
margin: 0 auto; /* centering (upping the ante a bit) */
}
#imagemap li {
list-style: none; /* get rid of the bullets */
}
#imagemap a{
text-decoration: none; /* remove the look of the link */
color: inherit; /* remove the coloring of the links */
position: absolute; /* position them within the closest */
/* parent that has position */
border: 1px dotted black; /* to find them (optional) */
}
#imagemap a span{
visibility:hidden; /* hide the legend by default */
background-color:yellow; /* just to make it stand out */
padding: 2px; /* jsut some layout of it */
display: block; /* just to make it fill the width, */
/* not essential at all*/
}
#imagemap a:hover{
border: 1px solid yellow; /* just some layout */
/* you could use CSS sprites to position a background */
/* on here to have a image effecct */
}
#imagemap a:hover span{
visibility:visible; /* make the legend appear */
}
#imagemap #im1 a {
height: 200px;
width: 200px;
top:0;
right:200px;
}
#imagemap #im2 a {
height: 200px;
width: 200px;
top:50%; /* centering as an example */
margin-top: -100px;
left:50%; /* centering as an example */
margin-left: -100px;
}
#imagemap #im3 a {
height: 100px;
width: 100px;
top:0;
left:0;
}
#imagemap #im4 a {
height: 100px;
width: 100px;
bottom:50px;
right:50px;
}
</style>
<!--[if lt IE 8]>
<style type="text/css">
#imagemap a{
color: black; /* the inherited color doesn't work in IE */
}
#imagemap li {
float:left; /* the li's don't collapse in IE and interfere with */
/* the absolutely positioned elements hover and clicking */
}
</style>
<![endif]-->
</head>
<body>
<p>some text</p>
<ul id="imagemap">
<li id="im1"><a href="#1"><span>one</span></a></li>
<li id="im2"><a href="#2"><span>two</span></a></li>
<li id="im3"><a href="#3"><span>three</span></a></li>
<li id="im4"><a href="#4"><span>four</span></a></li>
</ul>
<p>some text</p>
</body>
</html>

Works in FF3, safari, opera, IE7 and IE6.

IE6 will fail if you try to use e.g. both top and bottom on the absolutely positioned elements, but something like IE7.js can still save you (or you need to do the math to calculate height and width yourself -which can be done in this case as you know the size of the image up front-)

The interesting bits most likely are the absolute positioning inside an element that has position.
The span that's used to make the anchor have soft of a legend that's hidden till you hover over it.
The im1 till im4 could be id-s or classes, doesn't matter that much, you only need it to be able to give them each their own spot.

HTH

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved