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>