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.
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
<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.
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>
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
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.
<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>
<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
Copyright©2008 Dr.Liew Voon Kiong. All rights reserved |Contact|Privacy Policy