Results 1 to 5 of 5

Thread: Load Different Image each time Page Loads

  1. #1
    Join Date
    Feb 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Load Different Image each time Page Loads

    I need help in writing a script that opens different image in the webpage each time it is opened - ( i have 10 images and one of these must be loaded at random every time).

    Some scripts I found are suitable only for IE6 . I need the script to suit all browsers - IE4, 5, 6 ,7; Netscape above 4.0, Mozilla, Opera and other browsers.

    I also need to add another requirement:
    When the source of the webpage is opened - it should not show the script (obviously if we have the script as a .js file it won't) and also it should not display <script> </script> either at that place where the image is randomized.
    I remember having seen this feature in some website but I do not remember it now.

    Can anyone help me?

    Thanks in advance.

  2. #2
    Join Date
    Sep 2005
    Location
    India
    Posts
    1,627
    Thanks
    6
    Thanked 107 Times in 107 Posts

    Default

    1. For your first query the following kind of programming will give you what you want

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    #image
    {
    	width:760px;
    	border: 1px solid #000;
    	height:auto; /*You can use a predefined height here if you can have images with the similar height;*/
    }
    
    </style>
    <script type="text/javascript">
    //The array which is going to hold the image information. Store the image info along with their correct path; I've omitted the path here as I've stored the images in the same folder where my web page resides.
    var imageArray = new Array();
    
    imageArray[0] = "1.jpg"; //You can replace these image file names with your own image names.
    imageArray[1] = "2.jpg";
    imageArray[2] = "3.jpg";
    imageArray[3] = "4.jpg";
    function doIt()
    {
    	var rand = Math.floor(Math.random()*4); //Generating a random number between 0 and 3 here in your case you can replace 4 with 11 if you have 10 images
    	
    	var imgPath = "<img src='"+imageArray[rand]+"' alt='heder' border='0' align='absmiddle' />";
    	
    	document.getElementById("image").innerHTML = imgPath;
    	
    }
    </script>
    </head>
    
    <body>
    <div id="image"></div>
    <script type="text/javascript">
    doIt();
    </script>
    <br>
    <br>
    <br>
    Other texts
    </body>
    </html>
    Please note that in the above source code I've used my image name you need to change it into your image names. As you mentioned you have 10 images so you have to initialize the image array with all your 10 elements.

    Don't forget to change the random number line the one which I indicated in red color with a number which is equal to the number of total images you have + 1.

    2. Check this link

  3. #3
    Join Date
    Feb 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks.

    But still, I need the other queries to be answered too. Can you please suggest me where to look in for a solution?

    Thanks again

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    If you can have <script src="some.js" type="text/javascript"></script> on the page, it can be anywhere on the page. More easily somewhere after where the image will be but, using onload, it could be anywhere on the page.

    Using the above example (there are better ways to code that but, since it works, I will not go into that here), this could be in the some.js file:

    Code:
    //The array which is going to hold the image information. Store the image info along with their correct path; I've omitted the path here as I've stored the images in the same folder where my web page resides.
    var imageArray = new Array();
    
    imageArray[0] = "1.jpg"; //You can replace these image file names with your own image names.
    imageArray[1] = "2.jpg";
    imageArray[2] = "3.jpg";
    imageArray[3] = "4.jpg";
    function doIt()
    {
    	var rand = Math.floor(Math.random()*4); //Generating a random number between 0 and 3 here in your case you can replace 4 with 11 if you have 10 images
    	
    	var imgPath = "<img src='"+imageArray[rand]+"' alt='heder' border='0' align='absmiddle' />";
    	
    	document.getElementById("image").innerHTML = imgPath;
    	
    }
    doIt();
    and the body portion of the markup could look like so:

    HTML Code:
    <body>
    <div id="image"></div>
    <br>
    <br>
    <br>
    Other texts
    <br>
    <br>
    <br>
    more content
    <script src="some.js" type="text/javascript"></script>
    </body>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Feb 2007
    Posts
    145
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Exclamation

    I have found this script on Dynamic Drive and it lets you change your pictures. Click on this link here.

    http://www.dynamicdrive.com/dynamici...reqcontent.htm


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •