Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

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

2:36 pm on Dec 9, 2008 (gmt 0)

Preferred Member

10+ Year Member

joined:Apr 29, 2003
votes: 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:

any idea?

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

3:01 am on Dec 11, 2008 (gmt 0)

Senior Member

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

joined:Aug 7, 2003
votes: 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"
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<style type="text/css">
* {
#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;
#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;
#imagemap #im4 a {
height: 100px;
width: 100px;
<!--[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 */
<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>
<p>some text</p>

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.