Recently I have been exploring some simple JavaScript solutions for fitting more content into limited space. My Image Scrollbar and Image Scrollbar with Viewer articles illustrate a great way to condense images and even text into a small space.
In this article I will explore another simple space-saving solution, the JavaScript content rotator. The rotator features the ability for the user to mouse over the rotating content and freeze the rotation allowing the user to examine the content as long as they like. The topics covered in this project include the display style, getElementById, setAttribute, setTimeout, onmouseover and onmouseout.
<html >
<head>
<title>Content Rotator Example</title>
</head>
<script language="javascript" type="text/javascript">
// Our tracking variables
var contentAreas = 3; // Total number of content areas in rotation
var contentIndex = 1; // Keeps track of which content area is currently being displayed
var continueRotation = 0; // Used to track whether rotation is currently on or off
var rotationInProgress = 0; // Used to track when we are on delay before rotateContent is executed
var changeDelay = 2000; // in milliseconds
// This function hanles all of the content rotation
function rotateContent(){
if (continueRotation == 1)
{
var contentAreaID = 'contentArea' + contentIndex;
// Turn off current content area
document.getElementById(contentAreaID).setAttribute('style','display: none')
// Turn on next content area
if (contentIndex == contentAreas)
{
// Roll back to the first area
contentIndex = 1;
}
else
{
contentIndex = contentIndex + 1;
}
contentAreaID = 'contentArea' + contentIndex;
document.getElementById(contentAreaID).setAttribute('style','display: inline')
// Call the rotation function again with the delay interval we defined above
setTimeout("rotateContent()",changeDelay);
// Rotation continues, set rotationInProgress
rotationInProgress = 1;
}
else
{
// Rotation is stopped, reset rotationInProgress
rotationInProgress = 0;
}
}
// This starts/restarts the content rotation
function rotationStart() {
continueRotation = 1;
// Only call the rotation function when we are not
// in the middle of a rotation delay
if (rotationInProgress == 0)
{
rotationInProgress = 1;
setTimeout("rotateContent()",changeDelay);
}
}
// This stops the content rotation
function rotationStop() {
// Stop rotation by setting the continueRotation flag to zero
continueRotation = 0;
}
</script>
<body onload="javascript:rotationStart()">
<table border="0" cellpadding="5" cellspacing="0" style="width: 410px; height: 600px">
<tr>
<td style="width: 50px; height: 50px; background-color: black">
</td>
<td style="width: 310px; height: 50px; background-color: black; text-align: center">
<span style="font-size: 24pt; color: #ffff66">My Content Slide Show</span></td>
<td style="width: 50px; height: 50px; background-color: black">
</td>
</tr>
<tr>
<td style="width: 50px; height: 50px; background-color: black">
</td>
<td style="width: 310px; height: 500px; text-align: center" onmouseover="rotationStop();" onmouseout="rotationStart();">
<table id="contentArea1" border="0" cellpadding="2" cellspacing="0" style="width: 300px; display:inline; position:relative;">
<tr>
<td style="text-align: center">
<span style="font-size: 16pt"><strong>Grasslands</strong></span></td>
</tr>
<tr>
<td>
<img height="300" src="http://cache4.asset-cache.net/xc/sb10069137p-001.jpg?v=1&c=IWSAsset&k=2&
d=8A33AE939F2E01FF64B2B2573E90E1541C8B733DE2CC979414FD0B94817AE1EA491BA17D91A07709" style="border-right: 1px solid; border-top:
1px solid; border-left: 1px solid;border-bottom: 1px solid" width="300" />
</td>
</tr>
<tr>
<td style="text-align: left">
This some text about the Grasslands image above. This caption can be as long as
you want it to be.</td>
</tr>
</table>
<table id="contentArea2" border="0" cellpadding="2" cellspacing="0" style="width: 300px; display:none; position:relative;">
<tr>
<td style="text-align: center">
<span style="font-size: 16pt"><strong>Tree Canopy</strong></span></td>
</tr>
<tr>
<td>
<img height="300" src="http://cache3.asset-cache.net/xc/200279134-001.jpg?v=1&c=IWSAsset&k=2&
d=50DD27FD4F7A6F9C59C56356C5A8832A0E2334C49255C574E74CC28F6DADD51BE1E50A2C30CF8D38" style="border-right:
1px solid; border-top: 1px solid; border-left: 1px solid;border-bottom: 1px solid" width="300" />
</td>
</tr>
<tr>
<td style="text-align: left">
This some text about the Tree Canopy image above. This caption can be as long as
you want it to be.</td>
</tr>
</table>
<table id="contentArea3" border="0" cellpadding="2" cellspacing="0" style="width: 300px; display:none; position:relative;">
<tr>
<td style="text-align: center">
<strong><span style="font-size: 16pt">Mountain Clouds</span></strong></td>
</tr>
<tr>
<td>
<img height="300" src="http://cache4.asset-cache.net/xc/sb10069137b-001.jpg?v=1&c=IWSAsset&k=2&
d=EDF6F2F4F969CEBD84070F63FAB363D11C8B733DE2CC9794D0C71D942779DC92491BA17D91A07709" style="border-right:
1px solid; border-top: 1px solid; border-left: 1px solid;border-bottom: 1px solid" width="300" />
</td>
</tr>
<tr>
<td style="text-align: left">
This some text about the Mountain Clouds image above. This caption can be as long as
you want it to be.</td>
</tr>
</table>
</td>
<td style="width: 50px; height: 500px; background-color: black">
</td>
</tr>
<tr>
<td style="width: 50px; height: 50px; background-color: black">
</td>
<td style="width: 310px; height: 50px; background-color: black">
</td>
<td style="width: 50px; height: 50px; background-color: black">
</td>
</tr>
</table>
</body>
</html>
The original home of HTML tutorials. HTMLGoodies is a website dedicated to publishing tutorials that cover every aspect of being a web developer. We cover programming and web development tutorials on languages and technologies such as HTML, JavaScript, and CSS. In addition, our articles cover web frameworks like Angular and React.JS, as well as popular Content Management Systems (CMS) that include WordPress, Drupal, and Joomla. Website development platforms like Shopify, Squarespace, and Wix are also featured. Topics related to solid web design and Internet Marketing also find a home on HTMLGoodies, as we discuss UX/UI Design, Search Engine Optimization (SEO), and web dev best practices.
Property of TechnologyAdvice. © 2025 TechnologyAdvice. All Rights Reserved
Advertiser Disclosure: Some of the products that appear on this site are from companies from which TechnologyAdvice receives compensation. This compensation may impact how and where products appear on this site including, for example, the order in which they appear. TechnologyAdvice does not include all companies or all types of products available in the marketplace.
