Rotate Content Easily with Object-Oriented JavaScript-5 : Page 5

by Tom Duffy

Sep 10, 2003

Page 5 of 5

Make It All Work
There are three tasks remaining. First, you need to include the script file you just created in the HTML file you created at the beginning of this solution. Add a reference to the script file in the <head> section of the HTML document:

   <script language="JavaScript" src="rotate.js"></script>

Next, you want to start the news items rotating when the page loads. To do that, attach a call to rotateNews to the onLoad event of the element:

   <body onLoad="rotateNews()">

Finally, you want to make the <div> container stop rotating when the user's cursor enters the container, and begin rotating again when the cursor leaves. To do that, attach mouseOver events to the news <div> container:





   <div id="news" onMouseOver="pauseNews()" 
      onMouseOut="playNews()" style="width: 140px">

Test your code by loading the HTML file into your browser. You'll see the items rotate each time the timer fires. You can see that this approach lets you increase the amount of content available to your users and simultaneously adds visual appeal to the page. You can see a modified version of this script (I left out the images) at http://www.ncc.commnet.edu. That site needed a way to present new news items effectively and this script fit the bill nicely. This script has been tested in and works with IE6, Mozilla 1.4, and Opera 7.11.

Tom Duffy , DevX's JavaScript Pro, is an Associate Professor at Norwalk Community College, Norwalk, CT where he teaches Web Development and Java. Tom is also the Manager of the NCC Ventures Lab, the college's in-house Web design studio. You can reach him via e-mail .

« Previous Page 1 2 3 45

0 Comments (click to add your comment)

Comment and Contribute