Grow your CSS skills. Land your dream job.

random img on page load

  • # February 19, 2009 at 7:53 pm

    Iam desperately without success trying to get a different img to load up on each pageload/refresh:

    here is mycode.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
    <html xmlns="http://www.w3.org/1999/xhtml"&gt;
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>Future Mind Training | Life Coaching</title>

    <link rel="stylesheet" type="text/css" href="css/styles.css">

    <script type="text/javascript">
    //<![CDATA[

    var images=new Array();
    images[0]="photo1.jpg";
    images[1]="photo2.jpg";
    images[2]="photo3.jpg";

    ar i=Math.floor(Math.random()*images.length);

    function randomImage() {

    document.getElementById("random").src=Raw Images;
    }

    onload=randomImage;

    //]]>
    </script>
    </head>

    <body>
    <div id="wrapper"><!–included to allow for extension below main photos–>
    <div id="container">
    <div id="photo-frame">

    <img border="0" img id="random" src="Raw Images/photo1.jpg" width="800" height="544" >
    </div><!–end of photo-frame–>
    <!–navigation divs here–>
    <div id="col1">
    <h1 class="h1_welcome">welcome</h1>
    </div><!–end of col1–>

    </div><!–end of container–>
    </div><!–end of wrapper–>
    </body>
    </html>

    what is wrong with it. it does not work.

    # February 20, 2009 at 12:21 am

    One thing I notice is that your original "src" starts with "Raw Images/", while the file paths in your JavaScript are just the image name. And.. when you set the .src in your randomImage function, you use "i", but "i" was declared outside of the function so it won’t know what that is. And.. that line should start "var" not "ar". And.. it should be " = images not Raw Images.

    But anyway, I don’t think JavaScript is the right route for this. Why rely on a client side language when that could potentially be disabled?

    Here is a really easy and "quick and dirty" way to do it with PHP:

    http://css-tricks.com/a-quick-and-dirty … -an-image/

    # February 21, 2009 at 5:24 am

    I got a random image replacement script on one of my pages, uses php,

    http://www.ikthius.com

    bear in ming I am just making the full image be squashed into the thumbnail area, I never resized to put a thumbnail in.

    # February 21, 2009 at 4:51 pm

    Just to get my2c in as well, I also use PHP to accomplish this effect.

    # February 23, 2009 at 7:06 pm

    I also agree that PHP is by far the best way to solve this problem. But supposing your host doesn’t provide PHP then you might want to try changing your randomImage function as follows:

    Code:
    function randomImage() {
    var i = Math.floor(Math.random()*images.length);
    document.getElementById(“random”).src=”Raw Images/” + images[i];
    }
    # September 21, 2009 at 6:37 am

    Here’s a quick and easy way to load a random image on pageload with Javascript:
    [url]
    http://webdesignandsuch.com/2009/09/how … avascript/[/url]

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".