JavaScript Lesson 30: Creating the Rollover Effect

<Previous Lesson> [Table of Contents] <Next Lesson>

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>

View the Example 30.1 in action

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

Example 30.2

<p
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.
</p>

View example 30.2 in action

Example 30.3

This example shows 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.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<script language=”Javascript”>
MyBooks=new Array(‘vb2010book.jpg’,’vb2008book.jpg’,’vb6book.jpg’)
book=0
function ShowCover(book){document.DisplayBook.src=MyBooks[book]
}</script></head>
<body>
<body>
<P align=”center”><img src=”vb2010book.jpg” name=”DisplayBook”/><p>
<center>
<table border=0>
<tr>
<td align=center><a onmouseover=”ShowCover(0)”><b>Visual Basic 2010 Made Easy</b></a><br>
<a onmouseover=”ShowCover(1)”><b>Visual Basic 2008 Made Easy</b></a><br>
<a onmouseover=”ShowCover(2)”><b>Visual Basic 6 Made Easy</b></a><br>
</td>
</tr>
</table>
</body>
</html>

View Example 30.4 in action.



<Previous Lesson> [Table of Contents] <Next Lesson>

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInShare on Reddit