SetTimeOut()

Hai all,

i am not a JS programmer. i have never type JS on to website. but i know without JS not web.

i have come a cross a situation where i have been force to usu JS.
SO I Need your support.

I need a simple slide show.

i have a table with a cell. i have put a picture in it. i want to chage this picture every 3 secods with another picture.

i came to know JS SetTimeOut(3) function can do this.
so please in the below code where do i insert the JS SetTimeOut(3)

Code:

---

<table width="400" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><img src="nature1.gif" width="256" height="256" /></td>
  </tr>
</table>

---

Code:

---

 
<script type="text/javascript">

var arr = [
'<img src="http://www.sitepoint.com/forums/image.php?u=169805&dateline=1174416181" width="256" height="256" />',
'<img src="http://www.sitepoint.com/forums/image.php?u=63920&dateline=1119178080" width="256" height="256" />',
'<img src="http://www.sitepoint.com/forums/image.php?u=36046&dateline=1092937354" width="256" height="256" />',
'<img src="http://www.sitepoint.com/forums/image.php?u=97648&dateline=1168529180" width="256" height="256" />'
]
function afridy () {

var el = document.getElementById('tdid');
el.innerHTML = arr[Math.floor(Math.random()*arr.length)];
setTimeout("afridy ()",3000);
}
// window.onload = afridy;
</script>


<table width="400" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td id="tdid" ><img src="http://www.sitepoint.com/forums/image.php?u=97648&dateline=1168529180" width="256" height="256"  onclick="afridy ()" /></td>
  </tr>
</table>

---

Code:

---

 
<script type="text/javascript">

var arr = [
'<img id="imgid" src="http://www.sitepoint.com/forums/image.php?u=169805&dateline=1174416181" width="256" height="256" />',
'<img id="imgid" src="http://www.sitepoint.com/forums/image.php?u=63920&dateline=1119178080" width="256" height="256" />',
'<img id="imgid" src="http://www.sitepoint.com/forums/image.php?u=36046&dateline=1092937354" width="256" height="256" />',
'<img id="imgid" src="http://www.sitepoint.com/forums/image.php?u=97648&dateline=1168529180" width="256" height="256" />'
]
var i = 0;
function afridy () {

var el = document.getElementById('imgid');

el.parentNode.innerHTML =  arr[i++] ;
if(i == arr.length ) { i = 0; }

setTimeout("afridy ()",3000);

}
// window.onload = afridy;
</script>


<table width="400" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><img id="imgid" src="http://www.sitepoint.com/forums/image.php?u=97648&dateline=1168529180" width="256" height="256"    onclick="afridy ()"  /></td>
  </tr>
</table>

---

As Raffles said:

Code:

---

 
<script type="text/javascript">

var arr = [
'http://www.sitepoint.com/forums/image.php?u=169805&dateline=1174416181',
'http://www.sitepoint.com/forums/image.php?u=63920&dateline=1119178080',
'http://www.sitepoint.com/forums/image.php?u=36046&dateline=1092937354',
'http://www.sitepoint.com/forums/image.php?u=97648&dateline=1168529180'
]
var i = 0;
function afridy () {

var el = document.getElementById('imgid');

el.setAttribute('src', arr[i++]);

if(i == arr.length ) { i = 0; }

setTimeout("afridy ()",3000);

}
// window.onload = afridy;
</script>


<table width="400" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><img id="imgid" src="http://www.sitepoint.com/forums/image.php?u=97648&dateline=1168529180" width="256" height="256"    onclick="afridy ()"  /></td>
  </tr>
</table>

---

Thanks Muaz.. Thanks. i ll check this.

Instead of using innerHTML you can just have the image URLs in the array (without the HTML) and then just set el.setAttribute('src', arr[i++]);

Also, setInterval() seems better suited to this case.