PDA

View Full Version : rollover gallery



meesh
May 11th, 2003, 02:53 AM
Hi,
I dont know much (make that anything!) about JS,
but maybe one of you wonderful smart people can help me.

I have a website, with members. each member has a bio. Each bio has a 125x125 px photo of the person. How can I use javascript to make it so when you mouseover the photo, it changes to a different photo? How can I make it so that everytime you mouse over the original photo, it changes to a random photo that is different? Like if they had 8 different photos, and it would randomly show a different one of the 8, everytime the main photo was rolledover by the mouse.

Any idea??

Thank you SOOOOO much!!

chrismiceli
May 11th, 2003, 05:19 AM
lets assume the pics are called this
bio0 (original, main)
bio1.jpg
bio2.jpg
bio3.jpg
...



<html>
<head>
<script type="text/javascript">
bio = new Array
for(x=0;x<8;x++) {
pics[x] = new Image();
pics[x].src = "bio" + x + ".jpg";
}
function rolled(sorc) {
y = Math.round(7*Math.random()) + 1;
sorc = pics[y].src;
}
function unrolled(sorc) {
sorc = pics[0].src;
}
</script>
</head>
<body>
<img src="bio0.jpg" onMouseOver="rolled(this.src)" onMouseOut="unrolled(this.src)">
</body>
</html>

Reno CF
May 11th, 2003, 06:33 PM
This looks like it would be a fun script, so I created some simple graphics, named them as suggested, then ran it using my HTML editor (1stPage2000). But I keep getting an error message that says "pics is undefined".

Does it need tweaking, or am I doing something wrong?

Thanks....

chrismiceli
May 11th, 2003, 08:21 PM
sorry, I changed the name of the array in mid making, to fix, do this

change this
bio = new Array
for(x=0;x<8;x++) {
pics[x] = new Image();

to this

pics = new Array
for(x=0;x<8;x++) {
pics[x] = new Image();

Reno CF
May 11th, 2003, 11:21 PM
Thank you. That did remove the error message, but for whatever reason I can't get the effect to work. I tried opening the page in Netscape and ran the "javascript:" command to get the js console to check it out, but it didn't report any errors either, so don't know why the image will not change on mouseover. If you have additional thoughts, please do let us know...

chrismiceli
May 12th, 2003, 06:38 AM
I tried it on my computer with the same results, the function aren't even getting called, used alerts to find that out, if anyone else can help, that would be appreciated. I don't see anything wrong with my code, of course after you fix it like i previously stated.

Danne
May 12th, 2003, 09:41 PM
It works fine if you pass the img object as parameter, instead of just the src-property:



<html>
<head>
<script type="text/javascript">
pics = new Array
for(x=0;x<8;x++) {
pics[x] = new Image();
pics[x].src = "bio" + x + ".jpg";
}
function rolled(img) {
y = Math.round(7*Math.random()) + 1;
img.src = pics[y].src;
}
function unrolled(img) {
img.src = pics[0].src;
}
</script>
</head>
<body>
<img src="bio0.jpg" onMouseOver="rolled(this)" onMouseOut="unrolled(this)">
</body>
</html>

Reno CF
May 12th, 2003, 10:11 PM
Thanks for advancing this one more step -- works great. Here's a note for anyone else following this thread:

When I tried to test it with only 4 images, I got this message periodically from 1stPage2000:

line 12 char 5: 'pics'[...].src' is null or is not an object

However when I increased my test to 9 images, it worked flawlessly, so I'm assuming as it is written, you should have at least 9 images in the folder for the random selection to work properly.

Reno CF
May 12th, 2003, 10:16 PM
For some reason, if I do the rollover long enough, the error message *does* return, so somehow something is not quite perfect.

If you open this script in IE and start rolling over, notice that the !Error message will eventually popup on the left side of the status bar (even though the script will in fact work as planned).

chrismiceli
May 13th, 2003, 12:45 AM
works for me, just make sure of these things
<html>
<head>
<script type="text/javascript">
pics = new Array
for(x=0;x<8;x++) { // NUMBER OF IMAGES
pics[x] = new Image();
pics[x].src = "bio" + x + ".jpg";
}
function rolled(img) {
y = Math.round(7*Math.random()) + 1; // ONE LESS THAN # OF IMAGES
img.src = pics[y].src;
}
function unrolled(img) {
img.src = pics[0].src;
}
</script>
</head>
<body>
<img src="bio0.jpg" onMouseOver="rolled(this)" onMouseOut="unrolled(this)">
</body>
</html>

Reno CF
May 13th, 2003, 01:14 AM
For whatever reason, this line gets an error if I keep doing mouseover:

img.src = pics[y].src;

This is the error message:

'pics'[...].src' is null or is not an object


I just tried it twice, and each time got that message on mouseover #7 (that could be a coincidence of course).

Danne
May 13th, 2003, 04:20 PM
The value of "y" is probably out of bounds sometimes. Try this:



y=Math.floor(Math.random() * 8);

Reno CF
May 13th, 2003, 05:23 PM
That seemed to fix it! I have rolled over 20+ times with no error messages whatsoever.

Thanks to both chrismiceli and Daniel for putting this together -- a nice little random graphics script has resulted from your combined efforts...

DaveStout
May 4th, 2006, 04:36 PM
<html>
<head>
<script type="text/javascript">

image1 = new Array
for(x=0;x<6;x++) { // NUMBER OF IMAGES
image1[x] = new Image();
image1[x].src = "image1_" + x + ".gif";
}

image2 = new Array
for(x=0;x<6;x++) { // NUMBER OF IMAGES
image2[x] = new Image();
image2[x].src = "image2_" + x + ".gif";
}


// pass new parameter array to determine picture array
function rolled(img, array) {
y=Math.floor(Math.random() * 6); // ONE LESS THAN # OF IMAGES

while (y == 0) //
{
y=Math.floor(Math.random() * 6);
}
img.src = array[y].src;
}

function unrolled(img, array) {
img.src = array[0].src;
}
</script>



</head>
<body>
<img src="image1_0.gif" onMouseOver="rolled(this, image1)" onMouseOut="unrolled(this, about)"><BR>
<img src="image2_0.gif" onMouseOver="rolled(this, image2)" onMouseOut="unrolled(this, directions)"><BR>
</body>
</html>


I also changed it so that it will not show the original picture on a rollover. I know this is old, but this forums code help me finish a project so I figured I would contribute my additions.