Web Sites made Easy

The tutorial you are about to go through does not use scripts to create a roll over image. Using javascript to create a roll over image can be slow and take a while to respond to a users mouse on and off. The way I will teach you already loads the image onto the page, so when a user mouses on the image, it instantly changes. This is also how I created my navigation buttons for my website.

First you need to create a white box to paint/color in. I am using Photoshop, but you can use paint if you do not have an image creating software. Watch out while using paint because if your text does not line up it will seem like the text is jumping up and down on mouse roll overs. If your text does not stay static this means you are off in your measurements. An example of my box may be seen to the right. I put my measurement in for the center of my box.

Next we will put in a background and put in the top half of the text. The second step in this task can be seen on the right. I gave the image a red background and black text that says hover here.

We just have one more task to complete with the image and then we are ready to start putting the CSS in for our roll over image. We need to put whatever we want the roll over to be on the bottom half. If you are doing text roll over images you must be careful in your placement. If you are 1px off you will be able to tell when you hover your mouse over the picture.

This roll over technique is useful for any roll over image that you would normally use javascript for. Now lets implement this last stage in our picture. My example may be seen on the right again.

Now we need the CSS for our rollover image. You need to make your image a background-image inside a div. You need to give the div a class, set the background-image to the picture, set the size to the width of the image and set the height to half of the image. You set the height to half because you only want to display one part at a time. You will want to set a background-position of left top;. You will then want to make another CSS that is yourclassname:hover and set that to a background-position of left bottom. Example code of the CSS:

The HTML Body cody would look like this:

The CSS makes it so only the top half of your image is shown. Then when the users mouse hovers over your image it shows the bottom half of your image.

Filed under: HTML Tutorials by Zach