Forums

magician

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">
<html xmlns="http://www.w3.org/1999/xhtml">
<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[i];
}

onload=randomImage;

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

<body>
<div id="wrapper">
<div id="container">
<div id="photo-frame">

<img border="0" img id="random" src="Raw Images/photo1.jpg" width="800" height="544" >
</div>

<div id="col1">
<h1 class="h1_welcome">welcome</h1>
</div>

</div>
</div>
</body>
</html>

what is wrong with it. it does not work.

chriscoyier

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[i] not Raw Images[i].

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/

ikthius

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

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.

TheDoc

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

davesgonebananas

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:

function randomImage() {
  var i = Math.floor(Math.random()*images.length);
  document.getElementById(\"random\").src=\"Raw Images/\" + images[i];
}

BeantownDesign

Here's a quick and easy way to load a random image on pageload with Javascript:

http://webdesignandsuch.com/2009/09/how ... avascript/

treehouse : what would you like to learn today?

Forums

random img on page load