JavaScript Tutorial JavaScript Examples JQuery Tutorial CSS Tutorial HTML Tutorial About Us

Lesson 30: Creating Rollover Effects


In this lesson, we shall learn how to create the rollover effect in JavaScript. Rollover means a webpage changes when the user moves his or her mouse over an object on the page. It is often used in advertising.There are two ways to create rollover, using plain HTML or using a mixture of JavaScript and HTML. We will demonstrate the creation of rollovers using both methods.

30.1 Creating Rollovers using HTML

The keyword that is used to create rollover is the <onmousover> event. For example, we want to create a rollover text that appears in a text area.  The  text  "What is rollover?" appears when the user place his or her mouse over the text area  and the rollover text changes to "Rollover means  a webpage changes when the user moves his or her mouse over an object on the page" when the user moves his or her mouse away from the text area. The HTML script is shown in Example 30.1

Example 30.1

<HTML>
<head></head>
<Body>
<textarea rows="2" cols="50" name="rollovertext" onmouseover="this.value='What is rollover?'"
onmouseout="this.value='Rollover means a webpage changes when the user moves his or her mouse over an object on the page'"></textarea>
</body>
</html>

Drag your mouse in and out of the text area and see the changes in text.

Example 30.2

In this example, we create a rollover effect that can change the color of its text using the style attribute.

<Textarea rows="2" cols="100" onmouseover="this.style.color='red'" onmouseout="this.style.color='blue'">
Move the mouse over this text to change its color to red. Move the mouse away to
change the text color to blue.
</textarea>

Example 30.3

This example illustrates how to create rollover effect that involves text and images. When the user places his or her mouse pointer over a book title, the corresponding book image appears.

<html>
<head>
<title>Rollover Effect</title>
</head>
<body>
<table>
<tbody>
<tr valign="top">
<td width="50">
<a><img src="vb2010book.jpg" name="book"></a>
</td>
<td><img height="1" width="10"></td>
<td><a onmouseover="document.book.src='vb2010book.jpg'"><b>Visual Basic 2010 Made Easy</b></a>
<br>
<a onmouseover="document.book.src='vb2008book.jpg'"><b>Visual Basic 2008 Made Easy</b></a>
<br>
<a onmouseover="document.book.src='vb6book.jpg'"><b>Visual Basic 6 Made Easy</b></a>
<br>
</td>
</tr>
</tbody>
</table>
</body>
</html>

View Example 30.3 in action

30.2 Creating Rollovers Using JavaScript

Though HTML can be used to create rollovers , it can only performs simple actions. If you wish to create more powerful rollovers, you need to use JavaScript. To create rollovers in JavaScript, we need to create a JavaScript function.

Example 30.4 is similar to Example 30.3 but we have added some JavaScript code. In this example, we have create an array MyBooks to store the images of three book covers. Next, we create a ShowCover(book) to display the book cover images on the page. Finally, we call the ShowCover function using the onmouseover event.

The JavaScript
<script language="Javascript">
MyBooks=new Array('javascriptcover.jpg','vb2013.jpg','vb2010book.jpg','vb2008book.jpg','vb6book.jpg')
book=0
function ShowCover(book){document.DisplayBook.src=MyBooks[book]
}</script>
The HTML

<a onmouseover="ShowCover(0)"><b>JavaScript Made Easy</b></a><br>
<a onmouseover="ShowCover(1)"><b>Visual Basic 2013 Made Easy</b></a><br>
<a onmouseover="ShowCover(2)"><b>Visual Basic 2010 Made Easy</b></a><br>
<a onmouseover="ShowCover(3)"><b>Visual Basic 2008 Made Easy</b></a><br>
<a onmouseover="ShowCover(4)"><b>Visual Basic 6 Made Easy</b></a><br>
<div style="text-align:center">
<img src="javascriptcover.jpg" style="width: 200px; height:auto" name="DisplayBook"/></div>
</div>

Drag your mouse over the book's name and see the changes in image

JavaScript Made Easy

Visual Basic 2013 Made Easy

Visual Basic 2010 Made Easy

Visual Basic 2008 Made Easy

Visual Basic 6 Made Easy


❮ Previous Lesson Next Lesson ❯


Copyright©2008 Dr.Liew Voon Kiong. All rights reserved |Contact|Privacy Policy