PDA

Click to See Complete Forum and Search --> : URGENT!! Help JavaScript Random Image

his boy elroy
01-06-2003, 06:12 PM
Hello everyone;

I am having difficulty with JavaScript which will enable a different image to appear everytime the page is refreshed <http://edesedoret.com/test/design.html>. Is there anyone out there knowledgable about this, please take a look at my html code (see attachment) to see what I am doing wrong. I previewed the page in the browser and no images appear. Thanks in advance. Below is the JavaScript I found on this site:



<!-- TWO STEPS TO INSTALL RANDOM IMAGE:

1. Copy the coding into the HEAD of your HTML document
2. Add the last code into the BODY of your HTML document -->

<!-- STEP ONE: Paste this code into the HEAD of your HTML document -->

<HEAD>

<SCRIPT LANGUAGE="JavaScript">

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
// Set up the image files to be used.
var theImages = new Array() // do not change this
// To add more image files, continue with the
// pattern below, adding to the array.

theImages[0] = '01.jpg'
theImages[1] = '02.jpg'
theImages[2] = '03.jpg'
theImages[3] = '04.jpg'

// do not edit anything below this line

var j = 0
var p = theImages.length;
var preBuffer = new Array()
for (i = 0; i < p; i++){
preBuffer[i] = new Image()
preBuffer[i].src = theImages[i]
}
var whichImage = Math.round(Math.random()*(p-1));
function showImage(){
document.write('<img src="'+theImages[whichImage]+'">');
}

// End -->
</script>

</HEAD>

<!-- STEP TWO: Copy this code into the BODY of your HTML document -->

<BODY>

<SCRIPT LANGUAGE="JavaScript">

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
showImage();
// End -->
</script>

<p><center>
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>

<!-- Script Size: 1.49 KB -->
ChikoritaPro
01-06-2003, 06:30 PM
That for loop:

for (i = 0; i < p; i++){
preBuffer[i] = new Image()
preBuffer[i].src = theImages[i]
}

seems to be completely useless. Here's a solution:

Make an image inside the <body> tag in the HTML document, such as "<img src=blank.gif border=0 name=nameofrandompicture>". You must include a name!!!

Then, inside the function:
function showImage(){
document.write('<img src="'+theImages[whichImage]+'">');

get rid of the document.write() and everything within a line. No, I have a different plan. Instead, place this:

document.nameofrandompicture.src=preBuffer[whichImage].src (all in one line.)

Recognize that thing between document. and .src? That's the same name as the image :)! Just place the name of the picture in that, and it should work. Also, one more thing, the "whichImage" variable looks like its randoming doesn't look good. You probably want to make it this:

var whichImage=Math.random()*100%p

That random would probably work better, in my opinion. Either way, enjoy :) ! I probably took too long to write all this though, and I bet I have already been beaten to it, lol. Anyways, hope you get it to work :D !
jdavia
01-07-2003, 02:12 AM
Here is a whole new cross browser script. Credit Adrian J. Moreno.

<html>
<style>
<!-- A {color: #000080; text-decoration: none}
.body A {color: #000080; text-decoration: none}
.nav A {color: #003300; text-decoration: none}
.navtop A {color: #FFFFFF; text-decoration: none}
//-->
</style>
<title>UNT School of Visual Arts</title>
<script language="javascript">

<!--
//***********************************************************************************
// This script developed by
// Adrian J. Moreno | AMoreno@art.sch.unt.edu | http://people.unt.edu/~ajm0007
// Web Developer | University of North Texas | School of Visual Arts

// All images should be formatted to height and width defined in the <img> tag. Otherwise, the image will be distorted.
// This can be done by resizing the image, increasing the canvas size around the image to spec. dimensions, and filling with the page's background color.
// Make sure that the image's place in the "Pics" array, matches its URL in the "sites" array.
// If you want more than 5 images & URLs, adjust the formula for randomNum.
// ***Make sure to put onLoad="chooseRandomNum()" in with the <body> tag or it won't work at all.

var Pics = new Array("http://www.IMAGENAME-0.jpg",
"http://www.IMAGENAME-1.jpg",
"http://www.IMAGENAME-2.jpg",
"http://www.IMAGENAME-3.jpg",
"http://www.IMAGENAME-4.jpg")


function chooseRandomNum(){
if (document.images) {
randomNum = Math.floor(((Math.random() * 20)) % 5)
document.thePicture.src = Pics[randomNum]
}
}

function openLink(url) {
location=(sites[randomNum])
}
//***********************************************************************************
//-->

</script>
<script LANGUAGE="JavaScript1.2">

<!-- Fixes onresize bug in NS4
NS4 = document.layers;
if (NS4) {
origWidth = innerWidth;
origHeight = innerHeight;
}

function reDo() {
if (innerWidth != origWidth || innerHeight != origHeight)
location.reload();
}

if (NS4) onresize = reDo;
//-->
</script>
</head>
<body bgcolor="#FFFFFF" font color="#FFFFFF" link="#000080" vlink="#000080" alink="#FF0000" background="images/back-bw.gif" onLoad="chooseRandomNum()">

<table border="1" width="600" cellspacing="0" cellpadding="0" height="1">
<tr>
<td valign="top" class="nav" width="151"></td>
<td valign="top" class="body" width="282"><p align="center">&nbsp;<br>
<a href="javascript:openLink()" onmouseover="self.status='Click for more from this artist.'; return true" onmouseout="self.status=' ';return true"><img name="thePicture" src="http://www.IMAGENAME.gif" alt="Click for more from this artist." border="2" height="207" width="280"></a></p>
</td>
</tr>
</table>
</body>
</html>