random image problem [Archive]

Click to See Complete Forum and Search --> : random image problem

JoshR

07-08-2003, 03:33 PM

Hi everyone.
I have four thumbnails and a text link. And a bunch of thumbnail images in an array. when you rollover the text link, i want a randomly chosen thumbnail to display a randomly chosen image.
I cant figure out how to make it work on a random image.

i know thats confusing, but if you look at what I have already you should see what i mean:

___________

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>random rollover </title>
<script language="JavaScript">
</script>

</head>
<body>

<div>
<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>
</div>
<p>_</p>
<p>_</p>
<p>_</p>
<p>_</p>
<p><a href="www.wherever.com" onmouseover="RandomSwapOut()" onmouseout="SwapBack()">click </a></p>

</body>
</html>

Basically, where it says: document.thumb1.src = roller[showthis].src; return true;
}

I want "thumb1" to be thumbX where X is an integer randomly chosen between one and sixteen (although in this example theres only four thumbs...).

Can anyone help? I'm really new to JS.
Thanks!

Jona

07-08-2003, 03:44 PM

eval("document.thumb"+showthis+".src = roller[showthis].src"); return true;

[J]ona

JoshR

07-08-2003, 03:53 PM

kajeezuz that was fast!

...and it almost works exactly how i wanted it to!! one minor problem: now the pictures don't swapBack to the original.

Also could you quick-like explain what it does?

Jona

07-08-2003, 03:58 PM

Use the same code (basically) in your swapBack function.

The eval() method basically generates dynamic code. Example, doing this: eval("alert('hi!');" in code is the same thing as doing this: alert('hi!');. What it's doing is grabbing the integer from the variable showthis and putting it in the place of it. So it ends up being document.thumb[whatever number showthis represents currently].src = .... Etc.

[J]ona

JoshR

07-08-2003, 04:10 PM

COOL. Thanks. You rock.

Theres one more thing though. Now I have this:

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();}

//trying to get thumb1 to be thumb+ random#

//the next line replaces the image with the new, random image
eval("document.thumb"+showthis+".src = roller[showthis].src"); return true;
}
//back to original state:
function SwapBack() {
eval("document.thumb"+showthis+".src = '../images/brain_thumb.gif'"); return true;
}

Jona

07-08-2003, 04:12 PM

Please specify the problem.

[J]ona

JoshR

07-08-2003, 04:20 PM

For some reason that last post got cut off halfway. sorry bout that.

In the code above, the image being replaced is chosen at random (good).
but the replacement image is the same for each placeholder image (bad).

This is confusing to me even.. in the beginning i had one image with multiple states. now i have multiple images with only two states: original and swapped.
what i want is multiple images with multiple states.

Jona

07-08-2003, 04:22 PM

Make your swapBack() function look like this:

function SwapBack() {
showthis = parseInt((Math.random()*(roller.length-1))+1);
eval("document.thumb"+showthis+".src = '../images/brain_thumb.gif'"); return true;
}

[J]ona

JoshR

07-08-2003, 04:30 PM

that doesnt work as well for some reason. anyway, i think the issue is confused, so i'll try to re-explain:

right now, thumb# is based on the randomly chosen roller number; so if roller two comes up, thumb_2.jpeg becomes the rollover image, and it is displayed in thumb2. can we make it be displayed somewhere else randomly, with its own random number generator?

Thanks a million for helping me.

Jona

07-08-2003, 04:33 PM

Uh, why not use onMouseOut="SwapRandomImage();" and onMouseOver="SwapRandomImage();" too?

[J]ona

JoshR

07-08-2003, 04:38 PM

What do you mean?

Jona

07-08-2003, 04:40 PM

Just what I said--use the same function for both onMouseOver and onMouseOut.

[J]ona

JoshR

07-08-2003, 04:47 PM

thats not what Im trying to do. I'm trying to get thumb# to be different than roller#.

this is really confusing. I have four images that are transparent spacers and a visible text link. when you rollover the text link, i want a random image to appear in a random place and when you rollout i want it to go back to transparent.

right now an image comes up in a random place, but its the same image in that place each time.

Jona

07-08-2003, 04:49 PM

Do you have a link so that I can view it online?

[J]ona

JoshR

07-08-2003, 04:57 PM

and you're psychic, too. I just put it up:

http://www.labbrain.com/secure/jon/jsrandomswap3b.html

all i want is a different image in a different place each time you rollover.

Jona

07-08-2003, 05:09 PM

I'd try doing this:

function RandomSwapOut() {
showthis = parseInt((Math.random()*(roller.length-1))+1);

eval("document.thumb"+showthis+".src = roller[showthis].src"); return true;
}

[J]ona

JoshR

07-08-2003, 05:21 PM

well, that didn't work, but i think i figured it out.

I added:
showwhere=parseInt((Math.random()*(roller.length-1))+1);

to the function, and changed the eval statement to:

eval("document.thumb"+showwhere+".src = roller[showthis].src"); return true;

It seems to work like I wanted. Now i just hope I can modify it correctly for the real page!

Thanks for all the help!!!!!!!!

Jona

07-08-2003, 05:25 PM

Well, glad you got it working. :)

[J]ona