CSS image rollover map

Hover over the country to 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.

The HTML
<ul id="m-east"> <li id="chd"><a href="#">Chad</a></li> <li id="cyp"><a href="#">Cyprus</a></li> <li id="egy"><a href="#">Egypt</a></li> <li id="gre"><a href="#">Greece</a></li> <li id="irq"><a href="#">Iraq</a></li> <li id="isr"><a href="#">Israel and Palestinian Territories</a></li> <li id="jor"><a href="#">Jordan</a></li> <li id="leb"><a href="#">Lebanon</a></li> <li id="lib"><a href="#">Libya</a></li> <li id="sau"><a href="#">Saudi Arabia</a></li> <li id="sin"><a href="#">Sinai</a></li> <li id="sud"><a href="#">Sudan</a></li> <li id="syr"><a href="#">Syria</a></li> <li id="tur"><a href="#">Turkey</a></li> </ul>

How the css works

The basis of how it all works is detailed below, I've only used Egypt & Israel as examples, as it may look too confusing otherwise. Once you've grasped the idea from these two you can check out the complete css file. The css file has comments using the titles below.

Visible image map container

This outlines the overall size of the image or it's container element, the path to the image 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 on the image

Basically in the css section below, you are stipulating the visible image position (from the left and top edges).
#egy { left: 148px;top: 92px;}

#isr { left: 340px; top: 82px;z-index: 30; }

An explaination of z-index
The image area being targeted is a rectangle, you can view the image with the blocks marked to see what I mean. Because a lot of the countries overlap some will need some assistance to show up, 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 up, I've given it a z-index value (30). This basically means it is higher in the stack than the larger Jordan (z-index 20), effectively taking it's territory to the east of the Dead Sea. Mmm, so unlike Israel to do that Iraq is also assigned a z-index value (10).
#irq {left: 424px; top: 0px; z-index: 10;} #isr {left: 340px; top: 82px; z-index: 30;} #jor {left: 350px; top: 86px; z-index: 20;}

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 width & height

This is where you set the country width & height.
#egy a { #isr a { width: 212px;height: 223px; width: 29px;height: 77px; } }

Country hover image position

And lastly you tell the browser where to look for the hover image (below the visible image). This hidden image must not have overlaps, as they will show up when called up by hovering on the intended country. Remember you are calling up a rectangle. If you study the hidden image, none of the countries overlap.
#egy a:hover { background: url(../css_dev/images/middle-east.png) -264px -622px no-repeat; } #isr a:hover { background: url(../css_dev/images/middle-east.png) -298px -439px 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. I have left the opacity css on Libya as an example for you to see on the above map. 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 (the css3 standard) opacity: 0.6; IE8 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; Early IE browsers (IE5, IE6 & IE7) filter: alpha(opacity=60); Early Mozilla browsers -moz-opacity: 0.60; Early Safari/Konqueror browsers -khtml-opacity: 0.6;
#lib a:hover {opacity: 0.6;

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; filter: alpha(opacity=60); -moz-opacity: 0.60; -khtml-opacity: 0.6; }

A note on cascading order

Cascading Style Sheets work in an ordered way, so the 6th line will take priority over the 5th etc. The Sinai is a good example of this. If the css for Sinai were to appear before the Egyptian css, the Sinai flag would not appear, as Egypt covers it entirely. To quickly prove that, you can move the Sinai line in the HTML (highlighted in red) above the Egyptian one. As explained earlier, z-index would deal with this if necessary, but getting the order right first makes life easier.
<li id="sin"><a href="#">Sinai</a></li> <li id="egy"><a href="#">Egypt</a></li>

A ***png apology
Ok here goes. I've catered for IE6 since this site has been in existence (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.