CSS image rollover map

Hover over the country to fully reveal the national flag.

This map, including mouse over national flags, is constructed with one image and positioning on hover controlled with a css file.

How the css works

The css is specific to this map only obviously, but if you want to check it out, the css file is here.

The basis of how it all works is detailed below, I've used Egypt as the example.

#m-east {
position: relative;
width: 500px;
height: 364px;
background: #5ae url(../css_dev/images/middle-east.gif) no-repeat;
margin: 2em auto;
padding: 0;
}

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

#m-east a {
display:block;
text-indent:-9999px;
text-decoration:none;
outline:none;
cursor:default;
}

#chad {left: 1px; top: 243px; width: 120px; height: 120px; z-index: 10;}
#libya {left: 1px; top: 59px; width: 174px; height: 272px;}
#sudan {left:118px; top: 288px; width: 264px; height: 75px;}
#egypt {left: 148px; top: 92px; width: 212px; height: 224px;}
#saudi {left: 345px; top: 106px; width: 154px; height: 257px;}
#israel {left: 340px; top: 82px; width: 29px; height: 76px; z-index: 10;}
#jordan {left: 350px; top: 86px; width: 79px; height: 81px;}
#lebanon {left: 356px; top: 54px; width: 27px; height: 31px; z-index: 10;}
#syria {left: 370px; top: 1px; width: 123px; height: 103px;}
#iraq {left: 424px; top: 1px; width: 75px; height: 148px;}
#turkey {left: 261px; top: 1px; width: 198px; height: 28px;}
#cyprus {left:312px; top: 28px; width: 39px; height: 21px;}
#greece {left:180px; top: 1px; width: 65px; height: 26px;}
#sinai {left: 280px; top: 118px; width: 100px; height: 75px; z-index: 10;}

#chad a {height: 120px;}
#libya a {height: 272px;}
#sudan a {height: 75px;}
#egypt a {height: 224px;}
#saudi a {height: 257px;}
#israel a {height: 76px;}
#jordan a {height: 81px;}
#lebanon a {height: 31px;}
#syria a {height: 103px;}
#iraq a {height: 148px;}
#turkey a {height: 28px;}
#cyprus a {height: 21px;}
#greece a {height: 26px;}
#sinai a {height: 75px;}

#chad a:hover, #libya a:hover, #sudan a:hover, #egypt a:hover, #saudi a:hover, #israel a:hover, #jordan a:hover, #lebanon a:hover, #syria a:hover, #iraq a:hover, #turkey a:hover, #cyprus a:hover, #greece a:hover, #sinai a:hover {background: url(../css_dev/images/middle-east.gif); background-repeat:no-repeat;}

#chad a:hover {background-position:-175px -467px;}
#libya a:hover {background-position:-1px -365px;}
#sudan a:hover {background-position:-1px -769px;}
#egypt a:hover {background-position:-288px -622px;}
#saudi a:hover {background-position:-346px -365px;}
#israel a:hover {background-position:-298px -440px;}
#jordan a:hover {background-position:-0 -637px;}
#lebanon a:hover {background-position:-299px -537px;}
#syria a:hover {background-position:-175px -365px;}
#iraq a:hover {background-position:-213px -588px;}
#turkey a:hover {background-position:-1px -738px;}
#cyprus a:hover {background-position:-298px -516px;}
#greece a:hover {background-position:-97px -712px;}
#sinai a:hover {background-position:-98px -637px;}

Visible image map container

This outlines the overall size of the image or it's container element, where to find it and a background color if needed.

#m-east {
position: relative;
width: 500px;
height: 364px;
background: #5ae url(../css_dev/images/middle-east.gif) no-repeat;
padding: 0;
}

List styling

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

Link styling

#m-east a {
display: block;
text-indent: -9999px;
text-decoration: none;
outline: none;
cursor: default;
}

Country position & size

Basically in the css section below, you are stipulating the visible image position (from the left and top edges), along with the width & height of the country.

#egypt {
left: 148px;
top: 92px;
width: 212px;
height: 224px;
}

A note on z-index

The area is a rectangle or square, which only just works on this map, you can view the image with the blocks marked to see what I mean. Hovering around the Chad/Libya border is an example of this. With your mouse that is. Hovering around African borders is not recommended, very dodgy.

If you did look at the block image you would have noticed that Israel is nearly completely over lapped by the surrounding countries. To allow a reasonable chance of Israel showing easily, I've given it a z-index value. This basically means it is higher in the stack than the larger Jordan, effectively taking it's territory to the east of the Dead Sea. Mmm, so unlike Israel to do that

For a full and very good explaination of z-index go to the site '24ways (to impress your friends)', which has an article called Z's not dead baby, Z's not dead on the subject.

Country height

This is where you set the link height. This is not the same as the height stated above in 'Country position & size'.

#egypt a {
height: 224px;
}

Country hover image position

And lastly you tell the browser where to look for the hover image (outside the visible image).

#egypt a:hover {
background: url(../css_dev/images/middle-east.gif) -288px -622px no-repeat;
}

Adding opacity to an image

A tip: When you are lining up the css to the image positions, add some opacity to the hovered image so that you can see the outline below. It can save a lot of time. It won't validate until CSS3 comes along, but you can ditch it once you are happy with the final product.

The reason for there being four different ways to set the opacity, is to cover all options. Until CSS3 is released and opacity is part of it, different browsers have different ways for setting it. I've listed them below.

Most browsers {opacity: 0.6;}

IE browsers {filter: alpha(opacity=60);}

Early Mozilla browsers {-moz-opacity: 0.60;}

Early Safari/Konqueror browsers {-khtml-opacity: 0.6;}

#m-east a:hover {
opacity: 0.6;
filter: alpha(opacity=60);
-moz-opacity: 0.60;
-khtml-opacity: 0.6;
}

Before you tell me, yes I know...

Of course the above example could all be done reasonably easily, by using the visible image and setting opacity in the css file, although the opacity would show up as a rectangle over each country. The fact is, doing it this way, you can change the hover image to whatever you want to, as you can see if you hover on the Sinai image.

You may get a better idea of showing different images for each section from this rollover map, which also has a good javascript/css method for showing tooltip detail.

Credit

Not me! I found this while browsing www.tanfa.co.uk, our map is a version of the CSS Image Rollover Map ~ Europe. Although having said that, I spent a while creating the image and even longer messing around with the css file to get the positioning correct. And I've added the opacity tip to make your life easier, so big up to me

Tanfa, is also a great place for css related information and tutorials. The navigation menu used on this site was developed from a tutorial there.