There are many different ways to add rollover effects to images. CSS is the recommended way due to its high compatibility and small amount of code needed.
1. Create the before and after images
Here’s our first image
Here’s the second image
2. Use your favorite image editor to stack the images on top of each other
This is called a sprite. It helps reduce load times by eliminating an HTTP request.
3. Create a basic HTML document
4. Add CSS
Since we are adding the rollover to an anchor we need to have it display as an inline-block. Inline-block elements allow us to define a fixed height and width. The height and width should be that of the individual images. We only want to display one image at a time so we use “top” and “bottom” to tell the browser which part of the image to display.
The final page will look something like: (example)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS Rollover</title>
<style type="text/css">
#muo-link {
display:inline-block; /* Allows the anchor to have a fixed width and height */
background:url(sprite.png) top; /* Top aligns the top of the image to the top of the anchor */
width:224px; /* The width of the image */
height:97px; /* The height of the image (not sprite) */
}
#muo-link:hover {
background:url(sprite.png) bottom; /* Bottom aligns the bottom edge of the image to the bottom of the anchor */
}
</style>
</head>
<body>
<p>
<a href="http://makeuseof.com" id="muo-link"></a>
<br>
This page successfully passed HTML and CSS validation.
</p>
</body>
</html> |