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.png) 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.png); 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.png) 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.png) -288px -622px no-repeat;
}

Adding opacity to an image

A tip: When you are lining up the css hovered country image to the actual country 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;
}

A ***png apology

Ok here goes. I've catered for IE6 since this site has been in existance (2004) and quite frankly it's been a pain, what with css hacks, non png support and not having all the funky things that other browsers have had for years; opacity, border-radius to name only two.

So now as I type this (Sept 2008), 10% of the browser hits are IE6. Using png's instead of gif's are a far superior option. IE6's non support of png transparency is not worth me supporting them any more.

I'm sorry if IE6 users see white backgrounds instead of transparency, but it's better than everyone else with modern browsers seeing patchy images on optimised USB stick modems. All modern browsers can handle png's and even Windows 2000 users, who can't update to IE7 or IE8, can use Firefox or Opera for Windows, which are better browsers anyway. IE6 users will only reduce in size, while mobile USB stick modem users will definitely increase. Rant over.

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.