View Full Version : Help with random images..

07-08-2003, 06:07 AM
I have a grid(4 x 4) of 16 spacer images and a few text links on the side. Each text link represents a different folder of images. When you rollover each text link, I want a random spacer image (1-16) to display a random image from an array. So for example, the first text link is people-- when you rollover the word people I want a random square to show one of the seven pictures. The you rollout and back over the text link people and a different square shows a different picture out of the same array.

The thing is, i have no idea how to do that.

Can anyone help??


07-08-2003, 07:47 PM
I'm trying to get this image to randomly change when some text is rolled over. can anyone explain why this is not working? Or better yet, how to make it work?

<head><script language="JavaScript">
function random_imglink(){
var myimages=new Array()
//specify random images below. You can have as many as you wish
var ry=Math.floor(Math.random()*myimages.length)
if (ry==0)
document.imageLayer.src = ('<img src="'+myimages[ry]+'" border=0></a>')
<div id="imageLayer" style="position:absolute; left:26px; top:76px; width:52px; height:101px; z-index:1"><a href="doesntmatter.html"><img src="../images/thumb_1.jpg" name="imageOne" width="100" height="100"border="0" id="imageOne"></a></div>
<a href="doesntmatter.html" onmouseout="imageone.src=temp1.src" onmouseover="random_imglink()">click</a>

07-08-2003, 08:16 PM
OK everyone, ignore that last post.
I got it to work. now im trying to get the image that is replaced to be randomized. so theres four thumbs, and this random rollover is happening only on thumb1. can anybody show me how to concatonize a randomizer onto thumb?


<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>random rollover </title>
<script language="JavaScript"><!--
roller= new Array()
roller[1]= new Image(100,100)
roller[1].src ='../images/thumb_1.jpg'
roller[2]= new Image(100,100)
roller[2].src ='../images/thumb_2.jpg'
roller[3]= new Image(100,100)
roller[3].src ='../images/thumb_3.jpg'
roller[4]= new Image(100,100)
roller[4].src ='../images/thumb_4.jpg'

showthis=0 //prepares the repeat-preventing variable

function RandomSwapOut() {

//the next three lines help prevent repeating images
oldroller = new Array()
oldroller[2] = oldroller[1]
oldroller[1] = showthis

//the next line chooses the number to use in selecting the image
showthis = parseInt((Math.random()*(roller.length-1))+1);

//the next two lines help prevent repeating images
if (showthis == oldroller[1]) {RandomSwapOut();}
if (showthis == oldroller[2]) {RandomSwapOut();}

//the next line replaces the image with the new, random image
document.thumb1.src = roller[showthis].src; return true;
function SwapBack() {
document.thumb1.src = "../images/brain_thumb.gif"; return true;
// -->


<p><img src="../images/brain_thumb.gif" name="thumb1" width="100" height="100" border="0" id="thumb1"></a> </a>
<img src="../images/thumb.gif" name="thumb2" width="100" height="100" border="0" id="thumb2"><img src="../images/thumb.gif" name="thumb3" width="100" height="100" border="0" id="thumb3"></a>
<img src="../images/thumb.gif" name="thumb4" width="100" height="100" border="0" id="thumb4"></a>
<p><a href="www.wherever.com" onmouseover="RandomSwapOut()" onmouseout="SwapBack()">click </a></p>