Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
dhtml banner rotator
- Thread starter magmo
- Start date
It's a very simple concept. Just store each image source in an array, use setTimeout(), re-load a picture.
*cLFlaVA
----------------------------
[tt]insert funny quotation here.[/tt]
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]
<html>
<head>
<title>new document</title>
<script language="javascript" type="text/javascript">
<!--
var cur_image = 0;
var img_array = new Array("[URL unfurl="true"]http://www.google.com/images/logo.gif",[/URL] "[URL unfurl="true"]http://us.a1.yimg.com/us.yimg.com/i/ww/beta/y3.gif",[/URL] "[URL unfurl="true"]http://www.ibm.com/i/v14/t/ibm-logo.gif");[/URL]
var href_array = new Array("[URL unfurl="true"]http://www.google.com/",[/URL] "[URL unfurl="true"]http://www.yahoo.com/",[/URL] "[URL unfurl="true"]http://www.ibm.com");[/URL]
function loadImg() {
if (cur_image == img_array.length) cur_image = 0;
document.getElementById('banner').src = img_array[cur_image];
document.getElementById('banner_href').href = href_array[cur_image];
cur_image++;
setTimeout('loadImg()', 5000);
}
-->
</script>
</head>
<body onload="setTimeout('loadImg()', 5000);">
<div id="header">
<a href="[URL unfurl="true"]http://www.google.com/"[/URL] id="banner_href" target="_blank">
<img id="banner" src="[URL unfurl="true"]http://www.google.com/images/logo.gif"[/URL] />
</a>
</div>
<div id="main">
This is a banner rotator script. Every 5 seconds (5000 milliseconds according to JavaScript, the next image in the array will load. Once it gets to the last image, it will start from the beginning.
</div>
</body>
</html>*cLFlaVA
----------------------------
[tt]insert funny quotation here.[/tt]
- Thread starter
- #3
Hi
Thanks a lot, do you or anyone else know of any script that shows text in a way that this component does? Or like that?
Regards
Thanks a lot, do you or anyone else know of any script that shows text in a way that this component does? Or like that?
Regards
- Status