Jun 222010
 

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

First Image
Here’s our first image

Second Image
Here’s the second image

2. Use your favorite image editor to stack the images on top of each other

Sprite
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>
Share
Jun 092010
 

There are so many sites that have no optimization at all. Images are huge and scaled, scripts are large and uncompressed. Some even have 70+ requests being sent for additional content on 10-20 different domains. They are slow and hog bandwidth. I’ve found the worst of these tend be the the massive news sites dominated by flash content and 3rd party widgets. Swift-loading search engines like Google and Yahoo even lack quality optimization. I’ve put countless hours of work into perfecting performance on this site and it is still far from optimal.

Shared hosting easily rivals content distribution backed websites when properly configured. My redesign of Newbieworks loads extremely rapidly with as little of overhead as possible and matches loading times of Google. I’ve taken advantage of Google App Engine and used it as a free CDN thanks to a guide by Digitalistic.

Websites to help with optimizations:
Site-Perf – Measures website performance and displays a chart showing load time of elements
GTMetrix – Analyzes loading performance using YSlow and Page Speed
PunyPNG – Compresses images while maintaining quality
Smush.it – Image compression service acquired by Yahoo

Share