<!DOCTYPE html>
<head>
<style>
/******************************************************/
/* This technique creates a non-cached image rollover */
/* When image is rolled over, new image is obtained */
/******************************************************/
a#image1 {
background-image: url(/~sultans/html/demo/css/img/michael.gif); /* original image */
display: block;
width: 68px; /* must have width */
height: 90px; /* must have height */
background-repeat: no-repeat;
}
a#image1:hover {
background-image: url(/~sultans/html/demo/css/img/paul.gif); /* hovered image */
}
/***************************************************************/
/* This technique creates a cached image rollover */
/* Place 2 images one on top of another. */
/* When rolled over, clear out the background of the top image */
/***************************************************************/
#image2 { /* create a container, here a div tag */
background-image: url(/~sultans/html/demo/css/img/michael.gif); /* the hovered image */
position:relative; /* use relative position */
width: 80px;
height: 90px;
background-repeat: no-repeat;
}
#image2 a { /* "a" tag that occupies all of container's space */
position:absolute; /* use absolute position */
background-image: url(/~sultans/html/demo/css/img/paul.gif); /* the original image */
background-repeat: no-repeat;
}
#image2 a:hover { /* clear background, hovered image shows thru */
background-image: none;
}
</style>
</head>
<body>
<h2>Image Rollover without JavaScript</h2>
This image rollover
<a id="image1" href="xyz.html"> </a>
<b>is not cached</b>
<br /><br />
This image rollover
<div id="image2"> <a id="image2" href="xyz.html"></a> </div>
<b>is cached</b>
</body>