Back to CSS Tips
Preview: what the working site looks like.

rollover demo

The first thing is to build your rollover images. I combined two images into one to make the sprite image used in this demo. Using this two image sprite, this rollover demo shows how to display the link/visited, and hover/active states.

Update - In the latest versions of most browsers, the :visited pseudo-class only works on text links now. This demo was originally a three state rollover with an extra image built into the sprite to show the visited state as well. See an article here that explains why this change is being built in to current browsers.

Shown below is the image that makes this rollover work.

This makes for very fast rollovers (faster if your careful to make small images) because the user doesn't have to wait for the :hover image to download the first time he hovers over it.

The markup
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
    <div id="container">
		<ul id="demo">	
			<li id="rollover1"><a href="#"></a></li>
		</ul>
       		<h1>rollover demo</h1>
		<p>
			The first thing is to build your rollover images. I combined two images into one to make the 
			<a href="http://www.w3schools.com/css/css_image_sprites.asp">sprite image</a> used in this demo. 
			Using this two image sprite, this rollover demo shows how to display the 
			<strong>link/visited</strong>, and <strong>hover/active</strong> states. 
		<p id="update">
			Update - In the latest versions of most browsers, the <strong>:visited pseudo-class</strong> only 
			works on text links now. This demo was originally a three state rollover with an extra image built 
			into the sprite to show the visited state as well. See an 
			<a href="http://www.impressivewebs.com/styling-visited-links/">article here</a> that explains why 
			this change is being built in to current browsers.
		</p>
		<p>Shown <a href="#img">below</a> is the image that makes this rollover work.</p>
			<ul>
				<li>   
					The normal link state of the anchor will show the ship sailing to the right.
				</li>
				<li>
					In it's hover and active states, the bottom portion of the sprite image is 
					shown so you see the ship sailing the other directioin.
				</li>
			</ul>
		<p>
			This makes for very fast rollovers (faster if your careful to make small images) 
			because the user doesn't have to wait for the :hover image to download the first time 
			he hovers over it.
		</p>
    <!--container--></div>  
</body>
</html>
        
The CSS
html, body {
	margin: 0;
	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #000;
	background: #fc6;
}
#container {
	width: 400px;
	margin: 100px auto 900px;
	padding: 20px;
	border: 50px solid #99cccc;
	background: #CC6;
}
ul#demo { 
	margin: 0 auto;
	padding: 0;
	list-style: none; 
}
	li#rollover1 {
		height: 100px;
		width: 400px;
	}
		li#rollover1 a:link {
			height: 100px;
			width: 400px;
			display:block;
			background: url(roll-1.jpg);
		}
		li#rollover1 a:hover,
		li#rollover1 a:active {background: url(roll-1.jpg) bottom}
#pic {
	margin: 0 auto;
	display: block;
}
h1 {
	margin: 30px;
	text-align: center;
}
p#update {margin: 25px 0 25px 25px;}
	#container p a:link {color: #00f;}
	#container p a:visited {text-decoration: none;}
	#container p a:hover,
	#container p a:active {color: #f00;}
		
The Sprite Image for this demo:
rollover image