help! different images to appear on exact location after x seconds

**lameraxis** · 01-28-2009, 06:10 AM

guys! I really need your help..

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

Code:

<!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!

**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:

Code:

<!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

Thread: help! different images to appear on exact location after x seconds

Thread Tools

Search Thread

help! different images to appear on exact location after x seconds

The Following User Says Thank You to codeexploiter For This Useful Post:

Thank You!!

Bookmarks

Bookmarks

Posting Permissions