- slide 1 of 2
A Simple Approach
Basic Requirements to Create HTML Rollover Effects:
To create a HTML rollover image, you need one image that is displayed by default when the web page is loaded, another image when the mouse moves over the image (to show the rollover effect). To make the rollover effects more effective, make sure both the images are of the same size. Following this rule will give you a decent HTML rollover effect. Though there is nothing wrong with using images of different sizes, it is preferred to use images of same size as better programming practices, to provide a clean, unobtrusive visual interface.
Text rollover effects are used in web pages to create subtle effects like a change their color or font-weight, etc. The same approach is used for image rollovers is used in creating HTML text rollover effects. First, display a default text when the web page loads. When the mouse pointer moves over the text change the content of the text of the style of the text. Thus the user will see a text rollover effect.
- slide 2 of 2
Creating HTML Rollover Effects:
1) Create two images, it is better to use images that are of JPEG, GIF or PNG formats. For this example, I have used two images: beforerollover.png and onrollover.png. The image beforerollover.png is displayed as the default image when the web page is loaded and the image onrollover.png is the rollover image that is displayed when the mouse pointer moves over the image.
Thus a HTML rollover effect using images is created.
3) For the text rollover effect, follow the similar approach. Instead of an image object, here I have created a heading object. You can create any object like a paragraph object or a div object, that is left to you. Inside the the heading object, I have used the innerHTML property of the object to change the text during the onmouseover and onmouseout events.
Thus a HTML rollover effect using text is created.
HTML Rollover Effect - Complete Code:
<title>Rollover Effects Using HTML</title>
<h1 onmouseout="this.innerHTML='Move the mouse pointer over me and I will change.'" onmouseover="this.innerHTML='You moved the mouse pointer over
me and I changed. '">Move the mouse pointer over me and I will change.</h1>
<a href="#"><img src="beforerollover.png" onmouseover="this.src='onrollover.png'" onmouseout="this.src='beforerollover.png'" ></a>