Information & Communication Technology

Introduction

"Image swap", "mouse-over" and "image replacement" are all terms used to describe the effect of having one image being replaced with a second when the mouse is moved of the original image.

This tutorial explains two methods which can be used to achieve this effect without the need for JavaScript.

Method 1 is the method I prefer as it takes into account the possibility that potential visitors to a web site may have CSS styling and or graphics disabled.  It does have a drawback in that transparent images can not be used.

Method 2 allows for transparent images to be used, however, should a browsers CSS styling and or images be disabled, no link is visible.

Images

For this tutorial I have chosen to create an effect where the picture shows a thumb down, however, when you place your mouse on the picture the image changes to a thumb up.

I have created an image, 512px wide and 256px high, displaying the thumb down on the left and the thumb up on the right.

Both methods will use only this single image.

Method 1

This method uses an empty <em> tag to hide text which becomes visible when CSS styling and or graphics are disabled.

Thumbs 

The CSS code requires three elements to be styled.

The .image-swap-1 class defines the height and width and over-rides any padding and margins which may have been previously set.

The .image-swap-1 em style is where the first image resides.  In this tutorial one image is used so it is important that only the left hand side is displayed, hence the defining of width, height and background position.  To hide the text, absolute positioning is used with the top and left positioned defined as 0.

The last step requires that the hover for the em element is styled and this will display the alternate image or right hand side of our single image.

In the html below, notice how the <p> tag is attributed the image-swap-1 class.  In the same way, lists or divs can be used. The text is placed outside the <em> tag but inside the <a> tag.

Method 2

The second method requires a little less coding, although internet users who have CSS styling and or graphics disabled will not be able to access the links.

This method also requires three elements to be styled, where the first image (or left hand side of the single image is contained within the actual link styling.  Note the order of the class names, specifically a.image-swap-2 and a.image-swap-2:hover.

The HTML for this method is easy to implement.