Im looking for a script that can display an image, desciption and link which can rotate either after a pre-determined time or on each page refresh. If anyone could help i would appreciate it. Preferably without tables
Here is what I came up with, maybe you can use part/all of it for what you are trying to do. You can add as many images/descriptions/links as you like, just repeat and edit the three lines I used for example under the "First Image" and "Second Image" comments as many times as you need. You'll also need to set the "rotateAfterSeconds" variable at the top to whatever you want.. right now it rotates every 5 seconds. <html> <head> <script language=JavaScript> var rotateAfterSeconds = 5; var imagesArray = Array(); var descriptionsArray = Array(); var linksArray = Array(); var curImageNum = 0; var curDescriptionAndLinkHtml = ''; setInterval("rotateImage();",(1000 * rotateAfterSeconds)); //First Image imagesArray.push('http://somewhere.com/firstImage.jpg'); descriptionsArray.push('First Image Description'); linksArray.push('http://firstUrl.com'); //Second Image imagesArray.push('http://somewhere.com/secondIMage.gif'); descriptionsArray.push('Second Image Description'); linksArray.push('http://secondUrl.com'); function rotateImage() { if (curImageNum >= imagesArray.length) { curImageNum = 0; } document.getElementById('theImage').src = imagesArray[curImageNum]; curDescriptionAndLinkHtml = descriptionsArray[curImageNum] + "<br><a href=" + linksArray[curImageNum] + ">" + linksArray[curImageNum] + "</a>"; document.getElementById('descriptionAndLink').innerHTML = curDescriptionAndLinkHtml; document.getElementById('rotatedImage').style.display = ''; curImageNum++; } </script> </head> <body onLoad='rotateImage();'> This is some sample text.<p> <div id=rotatedImage style='display:none;'> <img id=theImage> <div id=descriptionAndLink></div> </div> </body> </html> HTML: