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:
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
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>
<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.