RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Rotate Content Easily with Object-Oriented JavaScript-5 : Page 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 .
Email AuthorEmail Author
Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date