Free CSS Rollover map of the UK

Css is one of the main ingredients for a User-friendly, Accessible website.
A good web designer should make every effort not to discriminate against those with disabilities.

Home | CSS Examples | CSS Search | Advertise your website FREE ! | Contact |

Go Back

Free css map rollover.
Example: 005 / Created: 11th Feb 2008

This css effect is an illusion which could, potentially take any form of animation you wish. I use the word illusion because the brain immediatly believes that something clever is going on. With a little time and patients you could replicate this simple css rollover map, or you could just copy and paste these images and code.

The CSS Working:

Next CSS Example

Copying the Code:

Paste Into your Head TAGS or Stylesheet. Note: For inclusion into stylesheet remove <style type="text/css"> & </style>

<style type="text/css">
/* credits: John Ryan @ www.freecssmenus.co.uk */
#uk {
padding: 0px;
background: url(ukmap2.gif) no-repeat;  
width: 326px;
height: 346px; 
margin: 0px auto; 
position: relative; 
}
#uk li {padding: 0px;
display: block; 
margin:0px;
}
#uk a {display: block; 
text-indent: 0px; 
text-decoration: none;
font-size:13px;
}
#scot{position:relative; 
left:110px; top:0px; 
width: 140px; 
height: 130px
}
#scot a{text-indent: 110px;
	left:110px;
	top:0px;
	width: 140px;
	height: 130px;
	display: block;
	list-style-type: none;
}
#scot a:hover{
	width: 150px;
	height: 160px;
	background-image:url(ukmap_scotland2.gif);
	background-repeat: no-repeat;
	background-position: 2px 0px;}
	
#eng{position:relative; 
left:140px; 
top:0px; 
width: 180px;
 height: 210px
 }
#eng a{text-indent: 110px;
	left:140px;
	top:0px;
	width: 180px;
	height: 210px;
	display: block;
	list-style-type: none;
}
#eng a:hover{
	width: 180px;
	height: 210px;
	background-image:url(ukmap_england2.gif);
	background-repeat: no-repeat;
	background-position: 2px -2px;}	
	
#wales{position:relative;
z-index:100;
left:137px; 
top:-148px; 
width: 80px; 
height: 95px
}
#wales a{text-indent: 8px;
	left:137px;
	top:-148px;
	width: 80px;
	height: 95px;
	display: block;
	list-style-type: none;
}
#wales a:hover{
	width: 80px;
	height: 95px;
	background-image:url(ukmap_wales2.gif);
	background-repeat: no-repeat;
	background-position: 12px 13px;
	}	
#ire{position:relative;
z-index:100;
left:70px; 
top:-305px; 
width: 83px; 
height: 70px
}
#ire a{text-indent: -106px;
	left:70px;
	top:-305px;
	width: 83px;
	height: 70px;
	display: block;
	list-style-type: none;
}
#ire a:hover{
	width: 83px;
	height: 70px;
	background-image:url(ukmap_ni2.gif);
	background-repeat: no-repeat;
	background-position: 12px -25px;}
</style>

Paste Into your Body TAGS.

Download Images

More CSS:
CSS Home Page
001. CSS Animation Effect
002. Horizontal Menu
003. Free Big CSS Button 1
004. Css Opacity Menu
005. Css Rollover Map (UK)
006. Css Photo Gallery 1

Free Advertising:
Advertise your Website !

Search:
Google
You Tube
Dynamic Drive
W3c Css Tutorial
Free Tags Page

Add your FREE Tag today!

Add your FREE Tag today!

Css Terms / Keywords:
layouts - templates - tutorial - menu - background - font - layout -font size - border - table - ringtones - float - background image text - position - template - div - align -image - editor - help - display - learn - list - web design -band - overflow - validator - tutorials - lyrics - html - zen - padding - class - design - center - margin - code - vertical align - development - html font size - form tables - hover - positioning - clear - menus - gallery - cursor - navigation - forms - web templates - opacity - styles - reference - color - ul - codes - servers

unique visitor counter