<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>CSS Image Rollovers</title>
<style type="text/css">
.rollover a {
display:block;
width: 90px;
padding:10px 10px 10px 7px;
font: bold 13px sans-serif;;
color:#333;
background: url("rollover-image.gif") 0 0 no-repeat;
text-decoration: none;
}
.rollover a:hover {
background-position: 0 -35px;
color: #049;
}
.rollover a:active {
background-position: 0 -70px;
color:#fff;
}
</style>
</head>
<body><h2>CSS Rollover Example</h2>
<p><a href="http://www.tutorio.com/tutorial/pure-css-image-rollovers"><< Back</a></p>
<div class="rollover">
<a href="#">Item 1</a>
<a href="#">Item 2</a>
<a href="#">Item 3</a>
<a href="#">Tutorio</a>
</div>
<p>View the source to see how this was done, visit <a href="http://www.tutorio.com/tutorial/pure-css-image-rollovers">The Pure Css Image rollover tutorial</a>
for an explanation</p>
</body>
</html>
