PDA

View Full Version : help! different images to appear on exact location after x seconds



lameraxis
01-28-2009, 06:10 AM
guys! I really need your help.. :confused:

I need help on how to make a script that:

after the page loads, on an exact location; shows an image after x seconds then after x seconds replaces it with another image and on and on and on.

eg. 1st image -> after 5 seconds -> next image-> after 10 seconds-> 3rd image -> after 20 seconds -> 4th image

i need this script to display important lyrics while a song plays on the background of my page..

so far i've only got the codes they use to randomize ads :(

please help.. thnx alot.. more power DD!

codeexploiter
01-28-2009, 12:35 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
</style>
<script type="text/javascript">
var globals = {
//You can edit the following part with the images(including path) information that you want to display and its alt value, if any
images: [{
src: 'image1.png',
alt: 'First Image'
}, {
src: 'image2.gif',
alt: 'Second Image'
}, {
src: 'image3.jpg',
alt: 'Third Image'
}, {
src: 'image1.png',
alt: 'Fourth Image'
}, {
src: 'image1.gif',
alt: 'Fifth Image'
}],
delay: 2000, //This is represented in millie seconds. If you want to increase or decrease the time delay change this value.
//You don't have to edit anything after this in JS Code.
count: 1
}
function changeImage() {
if (globals.count === globals.images.length) {
globals.count = 0;
}
if (document.getElementById('imageContainer') && document.getElementById('imageContainer').getElementsByTagName('img')[0]) {
document.getElementById('imageContainer').getElementsByTagName('img')[0].src = globals.images[globals.count].src;
document.getElementById('imageContainer').getElementsByTagName('img')[0].alt = globals.images[globals.count].alt;
globals.count++;
}
}
window.onload = function() {
setInterval(function() {
changeImage();
}, globals.delay);
}
</script>
</head>
<body>
<div id="imageContainer">
<img src="image1.png" border="0" alt="First Image" /> <!--Mention the first image that you want to show while the page loads -->
</div>
</body>
</html>


You can have your own CSS rules for the 'imageContainer' div element.

Hope this helps

lameraxis
01-28-2009, 12:50 PM
OMG! Thanks for the speedy reply!! Trying it right now! :D

lameraxis
01-28-2009, 01:14 PM
Mr. codeexploiter? hi! is there anyway i can adjust each of their delays?? like the 2nd image comes out exactly 5 secs after the first..? then the 3rd image exactly 20 seconds after the second?

thanks alot!

codeexploiter
01-28-2009, 01:39 PM
Here is the refined version in which you can mention a delay information to each images:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
</style>
<script type="text/javascript">
var globals = {
//You can edit the following part with the images(including path) information that you want to display and its alt value, if any
images: [{
src: 'image1.png',
alt: 'First Image',
delay: 2000
}, {
src: 'image2.gif',
alt: 'Second Image',
delay: 1000
}, {
src: 'image3.jpg',
alt: 'Third Image',
delay: 5000
}, {
src: 'image4.png',
alt: 'Fourth Image',
delay: 1000
}, {
src: 'image5.gif',
alt: 'Fifth Image',
delay: 6000
}],
//You don't have to edit anything after this in JS Code.
count: 1
}
function changeImage() {
if (globals.count === globals.images.length) {
globals.count = 0;
}
if (document.getElementById('imageContainer') && document.getElementById('imageContainer').getElementsByTagName('img')[0]) {
document.getElementById('imageContainer').getElementsByTagName('img')[0].src = globals.images[globals.count].src;
document.getElementById('imageContainer').getElementsByTagName('img')[0].alt = globals.images[globals.count].alt;
if(!globals.images[globals.count].delay){
globals.images[globals.count].delay = 1000;
}else{
globals.images[globals.count].delay = parseInt(globals.images[globals.count].delay);
}
setTimeout(function(){
changeImage();
},globals.images[globals.count].delay);

globals.count++;
}
}
window.onload = function() {
setTimeout(function(){
changeImage();
},globals.images[0].delay);
}
</script>
</head>
<body>
<div id="imageContainer">
<img src="image1.png" border="0" alt="First Image" /> <!--Mention the first image that you want to show while the page loads -->
</div>
</body>
</html>


I have highlighted my changes.

Hope this helps

lameraxis
01-28-2009, 02:04 PM
thank you! thank you! thank you! Thank God for people like you! /no1