How to Create an Image Rollover Using HTML Programming

Learning HTML can help you customize your Web page.

Hypertext markup language (HTML) is a computer language that is used to create Web pages. Knowing how to use HTML codes can help you manipulate your page settings. You can create an image link that will change when visitors move the mouse over the link. Image rollovers can be created using JavaScript. You can also create image rollovers for items in menus. When visitors scroll their mouse over the menu items, the menu item will become highlighted. Creating image rollovers is a good way to give your pages a more professional appeal.

Instructions

1. Start the word processor or text editor that you will use to create your Web page and open the page. Add the desired image and include it inside of the <CENTER> tag. After the image name, type NAME=“rollover”.

2. Type <A HREF=“?”> before the <CENTER> tag. Replace the question mark with the address of the Web page that you wish to have appear when a visitor clicks on the image. Type </A> after the image.

3. Verify that your text looks like the following:
   <A HREF=“pages.html”>
   <CENTER><IMG SRC=“photo.jpg” NAME=“rollover”></CENTER>
   </A>

4. Type ONMOUSEOVER=‘rollover.src=“?” ’ inside of the <A> tag. Replace the question mark with the location of the image that you wish to have appear when a visitor moves the mouse over the original image.

5. Type ONMOUSEOUT=‘rollover.src=“?” ’ Replace the question mark with location of the image that was added in Step 1.

6. Verify that your text looks similar to the following:
   <A HREF=“pages.html” ONMOUSEOVER=‘rollover.src=“photo.jpg” ’
   ONMOUSEOUT=‘rollover.src=“photo.jpg” ’>
   <CENTER><IMG SRC=“photo.jpg” NAME=“rollover”></CENTER>
   </A>

7. Open a new Web browser to verify that your Web page displays the image that you are using for your image rollover. Test your site and verify that visitors can move the mouse over the image and it will change to the image that you specified.

Tips & Warnings

• You should try your Web page in several browsers to see how each browser will display your page.

Resources

• Read this Article in Spanish