Login | Register   
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

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


advertisement
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 .
Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap