This is really stressing me out...

[Andrew2010]

I can't find any help with this. Ok, here's what I need:

 

I have a page called woodland.php, where I want a random image in a set position generated on page load. I have this done with HTML, but with that I have to make a page for every image! Seen here:

 

<script language="JavaScript">

<!-- Begin
var howMany = 10; // max number of items listed below
var page = new Array(howMany+1);

page[0]="earwig.htm";
page[1]="mantis.htm";
page[2]="";
page[3]="";
page[4]="";
page[5]="";
page[6]="firefly.htm";
page[7]="";
page[8]="";
page[9]="ant.htm";
page[10]="";


function rndnumber(){
var randscript = -1;
while (randscript < 0 || randscript > howMany || isNaN(randscript)){
randscript = parseInt(Math.random()*(howMany+1));
}
return randscript;
}
quo = rndnumber();
quox = page[quo];
window.location=(quox);
// End -->
</script>:

 

I place the image I want to load on each page, seen here:

 

<a href="capture.php"><img style="POSITION: absolute; TOP: 244px; LEFT: 410px" border =0 hspace=0 src ="images/insects/Earwig.png" width=70 height=33 ></a> 

 

Is there a way to generate these images on page load, in the same way as above, but without creating a new page for EVERY image?! There has to be a way to do this with PHP. Once again, I need to generate these images on woodland.php and not having to make a page for every image I generate. This way, users can't find these images with a address.

 

PLEASE HELP!

[OldWest]

Thats not html that is JavaScript.

 

And of course there are many ways to do what you are seeking..

 

You could load all images into an array like: images[] then each time the page is loaded, echo a random item (image) from the array.

 

php has a function called array_rand() .. this should at least get you started.

 

I am not sure of your skill set with php, but hope this helps some.

[Andrew2010]

Thanks for the reply, I appreciate it a lot. I'm basic at PHP, but I sort of understand the array function. Something like this?

 

<?php
// Define array.
$images = array('/images/1.jpg', '/images/2.jpg', '/images/3.jpg');

// Get random key and output array element into an image tag.
echo '<img src="' . $images[array_rand($images, 1)] . '" />';
?>

 

One problem though, is there any way to position each image individually? Like, say I want image 1 to be TOP: 244px; LEFT: 410px, image 2 to be TOP: 540px; LEFT: 200px, etc.

[Andrew2010]

Actually, I came up with a new javascript script, seen here:

 

<script language="JavaScript">
<!--

function random_imglink(){
  var myimages=new Array()
  //specify random images below. You can have as many as you wish
  myimages[1]="images/insects/Chinese Mantis Green Version.png"
  myimages[2]="images/insects/Green Stink Bug.png"
  myimages[3]="images/insects/Earwig.png"

  //specify corresponding links below
  var imagelinks=new Array()
  imagelinks[1]="index.html"
  imagelinks[2]="index.html"
  imagelinks[3]="index.html"

  var ry=Math.floor(Math.random()*myimages.length)

  if (ry==0)
     ry=1
     document.write('<a href='+'"'+imagelinks[ry]+'"'+'><img style="POSITION: absolute; TOP: 244px; LEFT: 410px" border =0 hspace=0 src="'+myimages[ry]+'" width=70 height=33></a>')
}

  random_imglink()
//-->
</script>

 

This seems to be great, so far, just one simple thing. I know the document.write controls all the images, but each image I’m using has different set positions. How do I do this without affecting ALL the other images?

 

[brianlange]

Create one array. Each array index will hold an object with values for image, link. top, left.

To access the link property the syntax is myimages[ry].link

 

Here's the code.

 

 

<script language="JavaScript">

<!--

 

function random_imglink(){

 

  var myimages = [];

 

  myimages[1] = {'image' : 'http://www.turnipnet.com/eastendmemories/dogs/dog2.jpg',

                'link' : 'index.html',

                'top'  : '100px',

                'left' : '100px'};

               

  myimages[2] = {'image' : 'http://www.turnipnet.com/eastendmemories/dogs/dog1.jpg',

                'link' : 'index.html',

                'top'  : '100px',

                'left' : '100px'};

               

  myimages[3] = {'image' : 'http://www.turnipnet.com/eastendmemories/dogs/dog3.jpg',

                'link' : 'index.html',

                'top'  : '100px',

                'left' : '100px'};                             

   

  var ry=Math.floor(Math.random()*myimages.length)

 

  if (ry==0)

    ry=1

    document.write('<a href='+'"'+myimages[ry].link +'"'+'><img style="POSITION: absolute; TOP:' + myimages[ry].top + '; LEFT:' + myimages[ry].left + '" border =0 hspace=0 src="'+ myimages[ry].image + '"></a>')

}

 

  random_imglink()

//-->

</script>

[Andrew2010]

You're a genus! Thanks so much. No one else understood what I was talking about, the script you gave me is wondeful!