Random Image selection [Archive]

Click to See Complete Forum and Search --> : Random Image selection

sniperguy_j

06-03-2004, 01:57 AM

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.

bherrington

06-03-2004, 02:59 AM

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>

bherrington

06-03-2004, 03:16 AM

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_j

06-03-2004, 02:12 PM

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!

bherrington

06-03-2004, 04:07 PM

Glad to help :D . 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_j

06-03-2004, 04:17 PM

sweet that did it. THanks again!

Bad_Programmer

09-21-2004, 01:13 PM

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_j

09-21-2004, 06:37 PM

seanmeade

11-25-2004, 09:25 AM

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>