Pin Me

Easy Way to Create HTML Rollover Effects

written by: vishalseafarer•edited by: Amber Neely•updated: 9/25/2010

Use HTML rollovers to make your web pages more dynamic, visually appealing and attract lots of visitors. It takes just a line of HTML code.

  • slide 1 of 2

    A Simple Approach

    Rollover images and rollover texts can easily make a web page more dynamic. In addition, the purpose of rollovers are used to provide instant visual feedback when the mouse moves over and out of an object that has been created to act as a rollover. Rollover effects can be created using CSS, HTML and JavaScript. Using WYSIWYG editors like Dreamweaver makes this task even easier. In this article, let us focus on how to create rollover effects using HTML, using a few simple steps.

    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.

    2) Create an image, object inside the body of the HTML code, by using the <img /> tag. The default image for the image object is beforerollover.png. Create the onmouseover and onmouseout event handlers for the image object. The 'this' keyword in the HTML (and JavaScript) code refers to the current object which is the image object. For the onmouseover event handler, point the object's source (using the 'this' keyword) to onrollover.png and for the onmouseout event handler, point the object's source (using the 'this' keyword) to beforerollover.png

    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>



    html rollover effects html rollover effects image rollver html rollover effects text rollver