How to Loop Images in a webpage with an even delay?

[mark torrington]

Hi,

I am a total Newbie to javascript and I have been trying for 5 hrs now to use CSS to reposition the slideshow see code below, and it won't work.

Can anybody help?


This is my Javascript in HTML
<div id="slideshow">
<script type="text/javascript">
var pictureArchive= ['1.jpg','2.jpg','3.jpg','4.jpg'];
window.onload=function() {
var o=document.createElement('img');
o.setAttribute('id', 'image');
o.setAttribute('src', pictureArchive[0]);
o.setAttribute('alt', '');
document.body.appendChild(o);
rotate(pictureArchive.length);
left=400;
}
function rotate(idx) {
if(idx>=pictureArchive.length) {
idx=0;
}
document.getElementById('image').src=pictureArchive[idx++];
timerID=setTimeout('rotate('+idx+')', 4000);
}
</script>

</div>

This is my CSS
#slideshow{
width:375px;
height:332px;
position:absolute;
top:35px;
left:363px;
}

[Fang]

o.setAttribute('alt', '');
document.getElementById('slideshow').appendChild(o);
rotate(pictureArchive.length);
left=400; // this does nothing and will never be reached

[mark torrington]

I can't thank you enough .

Its worked , its worked - cheers!

[moonbug]

How can I control the position where the output will be displayed by the function below? For example, I want to display the picture output between two paragraphs.

<H1>this is the bottom page</H1>

<script type="text/javascript">
window.onload=function display_pics() {
var o=document.createElement('img');
o.setAttribute('id', 'image');
o.setAttribute('src', pictureArchive[0]);
alert (pictureArchive[0].src);
o.setAttribute('alt', '');
document.body.appendChild(o);
rotate(pictureArchive.length);
}
</script>
<H1>this is the bottom page</H1>

[moonbug]

How can you attach an href link to each image that is looped?

[Fang]

o.onclick= function(){doSomething();};

[moonbug]

I created 2 arrays for the href links
var pictureArchive= ['1.jpg','2.jpg','3.jpg','4.jpg'];
var hrefArchive= ['http://1.com','http://2.com','http://3.com','http://4.com'];

how would I incorporate the array to the function rotate(idx) and window.onload=function() ?

Can you also suggest a site with good tutorial on using "document.getElementById"?

[moonbug]

Thank you Fang, I was able to get the href links working already. I added urllink=hrefArchive[idx]; to function rotate(idx) and then used the
o.onclick= function() to open urllink.

[mbusu]

I have the following script taken from this thread to loop through 4 images:


<script type="text/javascript">
var pictureArchive= ['1.jpg','2.jpg','3.jpg','4.jpg'];

window.onload=function() {
var o=document.createElement('img');
o.setAttribute('id', 'image');
o.setAttribute('src', pictureArchive[0]);
o.setAttribute('alt', '');
document.body.appendChild(o);
rotate(pictureArchive.length);
}

function rotate(idx) {
if(idx>=pictureArchive.length) {
idx=0;
}
document.getElementById('image').src=pictureArchive[idx++];
timerID=setTimeout('rotate('+idx+')', 5000);
}
</script>

All well and good, but can somebody please guide me how I can display these images in a table background?

e.g. <table border="0" height="311" width="873" cellspacing="0" cellpadding="0" background="image">

Any help would be greatly appreciated.

[Fang]

var pictureArchive= ['1.jpg','2.jpg','3.jpg','4.jpg'];

window.onload=function() {
rotate(pictureArchive.length);
}

function rotate(idx) {
if(idx>=pictureArchive.length) {
idx=0;
}
document.getElementsByTagName('table')[0].style.backgroundImage = 'url('+pictureArchive[idx++]+')';
timerID=setTimeout(function(){rotate(idx)}, 5000);
}

[mbusu]

var pictureArchive= ['1.jpg','2.jpg','3.jpg','4.jpg'];

window.onload=function() {
rotate(pictureArchive.length);
}

function rotate(idx) {
if(idx>=pictureArchive.length) {
idx=0;
}
document.getElementsByTagName('table')[0].style.backgroundImage = 'url('+pictureArchive[idx++]+')';
timerID=setTimeout(function(){rotate(idx)}, 5000);
}

Thanks for the quick reply Fang! My coding knowledge is next to zero with at best a rudimentary knowledge of HTML... I'm more into networking and that stuff.

If I have the following normal HTML table code, where do I insert the code for the background change please?


<table width=500>
<tr>
<td>Hello world!</td>
</tr>
</table>

[Fang]

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>

<script type="text/javascript">
var pictureArchive= ['1.jpg','2.jpg','3.jpg','4.jpg'];

window.onload=function() {
rotate(pictureArchive.length);
}

function rotate(idx) {
if(idx>=pictureArchive.length) {
idx=0;
}
document.getElementsByTagName('table')[0].style.backgroundImage = 'url('+pictureArchive[idx++]+')';
timerID=setTimeout(function(){rotate(idx)}, 5000);
}</script>

<style type="text/css">
* {margin:0;padding:0;}
</style>

</head>
<body>
<table width=500>
<tr>
<td>Hello world!</td>
</tr>
</table> 
</body>
</html>

[mbusu]

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>

<script type="text/javascript">
var pictureArchive= ['1.jpg','2.jpg','3.jpg','4.jpg'];

window.onload=function() {
rotate(pictureArchive.length);
}

function rotate(idx) {
if(idx>=pictureArchive.length) {
idx=0;
}
document.getElementsByTagName('table')[0].style.backgroundImage = 'url('+pictureArchive[idx++]+')';
timerID=setTimeout(function(){rotate(idx)}, 5000);
}</script>

<style type="text/css">
* {margin:0;padding:0;}
</style>

</head>
<body>
<table width=500>
<tr>
<td>Hello world!</td>
</tr>
</table> 
</body>
</html>

Thanks a lot Fang. If you're ever in Malta let me know and I'll buy you a pint or 2 or 9.

[mbusu]

Still running into problems with it Fang.

The code itself works, but it's affecting all my tables in the page. How can I get it to change the background of only one specific table?


mbusu

[Fang]

Reference the table by id, document.getElementById('tableID')

http://www.hotdesign.com/seybold/