Random Image selection

@sniperguy_jJun 03.2004

Ok… I want to have a random image from a list, on my home page everytime someone comes on…

So like a i have pictures #1-20 and all are the same parameters, and I want it to be totally random to which one will show on my home page. Each picture will have a link to a different part of my web site. Can anyone help me? THank you!

Here’s an example: www.x3church.com
this is like what i want it to do.

to post a comment

JavaScript

8 Comments(s) _↴

@bherringtonJun 03.2004 — #You need to set up an array specifying your image locations, then produce a random number using Math.random, make sure it's between zero and the length of your array, then use document.write to refer to the relevent array value giving the image location.

Example;

****IN THE <HEAD>****

<script>

var imageslist = new Array()

imageslist[0] = "images/TGGPCSwingLow_small.jpg"

imageslist[1] = "images/TGGPCGemmasGym_small.jpg"

imageslist[2] = "images/TGGPCBallerina_small.jpg"

imageslist[3] = "images/TGGPCTheSequel_small.jpg"

imageslist[4] = "images/TGGPCTheBigC_small.jpg"

function randomscript(){

//SET ARBITRARY UNACCEPTABLE VALUE FOR randomnumber

randomnumber = -1

//SET PARAMETERS TO RUN CALCULATION OF A RANDOM NUMBER

while (randomnumber < 0 || randomnumber > imageslist.length){

randomnumber = parseInt(Math.random()*(imageslist.length))

}

return randomnumber

}

</script>

****IN THE <BODY>****

<script>

randomscript()

document.write("<img align='center' src='"+ imageslist[randomnumber] + "'>")

</script>

@bherringtonJun 03.2004 — #Sorry, I've realised I've only answered half of your question in my previous post.

To include a hyperlink, make the array 2-dimensional , like this;

var imageslist = new Array()

imageslist[0] = new Array("images/TGGPCSwingLow_small.jpg", "http://www.microsoft.com")

imageslist[1] = new Array("images/TGGPCGemmasGym_small.jpg", "http://www.intel.com")

imageslist[2] = new Array("images/TGGPCBallerina_small.jpg", "http://www.google.com")

imageslist[3] = new Array("images/TGGPCTheSequel_small.jpg", "http://www.hewlettpackard.com")

imageslist[4] = new Array("images/TGGPCTheBigC_small.jpg", "http://www.ibm.com")

and change the document.write line to give the image a hyperlink like this;

document.write("<a href='" + imageslist[randomnumber][1] + "'><img align='center' src='"+ imageslist[randomnumber][0] + "'></a>")

(note the document.write should all appear on one line, it's broken here because of the limit on line length)

@sniperguy_jauthorJun 03.2004 — #TOtally Awesome THank you so much... I really appreciate it!

One thing though... there is this blue border around my image now... but I don't want it there.. any idea of how to remove this? or at least make it white...

here's an example: http://www.ghccstudents.org/index2.htm

thanks again, I'm all stoked now!

@bherringtonJun 03.2004 — #Glad to help ? . The blue border is a side effect of IE trying to be helpful, because in the document.write line, where the code specifies the image attributes, we made no mention of the 'border'. To get rid of it, in the document.write line find the <img> tag and add in;

border='0'

as one of the attributes.

By the way, page looks good.

@sniperguy_jauthorJun 03.2004 — #sweet that did it. THanks again!

@Bad_ProgrammerSep 21.2004 — #Sniper,

Can you show the final code that you ended up using for this? I tried using what was posted here and I can't seem to get it to work.

@sniperguy_jauthorSep 21.2004 — #<script>

<!--

var imageslist = new Array()

imageslist[0] = new Array("pictures/picture.gif", "http://www.yoursite.com")

imageslist[1] = new Array("pictures/picture.gif", "http://www.yoursite.com")

imageslist[2] = new Array("pictures/picture.gif", "http://www.yoursite.com")

function randomscript(){

//SET ARBITRARY UNACCEPTABLE VALUE FOR randomnumber

randomnumber = -1

//SET PARAMETERS TO RUN CALCULATION OF A RANDOM NUMBER

while (randomnumber < 0 || randomnumber > imageslist.length){

randomnumber = parseInt(Math.random()*(imageslist.length))

}

return randomnumber

}

</script>[/quote]

and then in the <body>

<script>

randomscript()

document.write("<a href='" + imageslist[randomnumber][1] + "'><img border='0' src='"+ imageslist[randomnumber][0] + "'></a>")

</script>

hope that helps....

@seanmeadeNov 25.2004 — #Hi,

I've been using a similar javascript to display random images - as above. However, I want to extended the use of random images to every page on my site.

The site has been built using a single template. When the template is applied to every page (with a deep file structure), the images do not load beyond the depth of the index.html file which is at the top of the file structure - e.g.:

image

image1.jpg

image2.jpg

image3.jpg

image4.jpg

image5.jpg

page

page1.html

page2.html

templates

my_template.dwt

index.html

I am certain that the problem is that Javascript is not correctly referencing the images. This is the script that has been included in the template and then applied as is to every other page.

Any advice will be much appreciated.

Cheers,

Sean

<head>

<script language="Javascript" type="text/javascript">

myPix1 = new Array("/images/1.jpg", "/images/2.jpg")

myPix2 = new Array("/images/3.jpg", "/images/4.jpg")

myPix3 = new Array("/images/1.jpg", "/images/2.jpg", "/images/5.jpg")

function choosePix() {
   if (document.images) {
   randomNum = Math.floor((Math.random() * myPix1.length))
   document.myPicture1.src = myPix1[randomNum]
 
   randomNum = Math.floor((Math.random() * myPix2.length))
   document.myPicture2.src = myPix2[randomNum]
 
   randomNum = Math.floor((Math.random() * myPix2.length))
   document.myPicture3.src = myPix3[randomNum]
   }
   }
   </script>

</head>

<body onload="choosePix()">

<table width="450" height="113" border="0" align="center" cellpadding="0" cellspacing="0">

<tr>

<td><div align="center"><img src="/images/spacer.gif" width="150" height="113" name="myPicture1" alt="" ></div></td>

<td><div align="center"><img src="/images/spacer.gif" width="150" height="113" name="myPicture2" alt="" ></div></td>

<td><div align="center"><img src="/images/spacer.gif" width="150" height="113" name="myPicture3" alt="" ></div></td>

</tr>

</table>

</body>

Also in #JavaScript _↴

Undefined ?How to make a script run when a page is unload thickbox download and close button?

Success!

Help @sniperguy_j spread the word by sharing this article on Twitter...

Tweet This

Random Image selection

8 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Random Image selection

8 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

8 Comments(s) _↴

Also in #JavaScript _↴