Mouseover and random image rotation

[Ohann]

Hi

I have a page with 9 images on, each one placed within a table cell.

I want to be able to have a different image displayed each time the page is refreshed as well as being able to have the images rotate if the user places his mouse over an image. On mouesout it can either stick to the last image shown on the rotation or revert back to the orginal image when the page was loaded.

Any ideas?

Thanks

[acoder]

By rotation, do you mean rotation angle-wise or rotate through the images?

[Ohann]

By rotation, do you mean rotation angle-wise or rotate through the images?

I mean rotate through a number of images.

This means that the 9 photos on my main page will have a further 9 images each that I want to start rotating when the mouse is put on the existing image when the page was loaded. I don't want all of them to start rotating at the same time. only when the mouse is placed on the image that specific section should start rotating and when the mouse is moved away it should stop. Also I would like the page to load a different image for the 9 cells of the table each time the page is refreshed.

[acoder]

You'll need to give each of your image objects an id.

Use Math.random() for randomisation. If you want to guarantee a different image, you'll need cookies.

For rotating through the images, use setInterval on mouseover with the required number of milliseconds. clearInterval() will cancel onmouseout.

To change an image, change its source:
[CODE=javascript]document.getEle mentById(imagei d).src='newimg. gif';[/CODE]

[Ohann]

You'll need to give each of your image objects an id.

Use Math.random() for randomisation. If you want to guarantee a different image, you'll need cookies.

For rotating through the images, use setInterval on mouseover with the required number of milliseconds. clearInterval() will cancel onmouseout.

To change an image, change its source:
[CODE=javascript]document.getEle mentById(imagei d).src='newimg. gif';[/CODE]

Hi

I have looked at both links to see if I can figure it out but no luck. i can understand what you are saying but I require a bit more help in actually writing the script

Where for instance do i declare the id for my images?

Thanks

[acoder]

Hi

I have looked at both links to see if I can figure it out but no luck. i can understand what you are saying but I require a bit more help in actually writing the script

Where for instance do i declare the id for my images?

Thanks

An example of an image would be [HTML]<img id="img1" src="image1.gif ">[/HTML]

Post what you have so far and what you are stuck on.

[Ohann]

gSlideshowInter val = 5;
gNumberOfImages = 5;

gImages = new Array(gNumberOf Images);
gImages[0] = "yumtiholidays. jpg";
gImages[1] = "yumtiholidays1 .jpg";
gImages[2] = "yumtiholidays2 .jpg";
gImages[3] = "yumtiholidays3 .jpg";
gImages[4] = "yumtiholidays4 .jpg";

function canManipulateIm ages() {
if (document.image s)
return true;
else
return false;
}
function loadSlide(image URL) {
if (gImageCapableB rowser) {
document.yhol.s rc = imageURL;
return false;
}
else {
return true;
}
}
function nextSlide() {
gCurrentImage = (gCurrentImage + 1) % gNumberOfImages ;
loadSlide(gImag es[gCurrentImage]);
}
gImageCapableBr owser = canManipulateIm ages();
gCurrentImage = 0;
setInterval("ne xtSlide()",gSli deshowInterval * 1000);
// -->
</SCRIPT>

gSlideshowInter val = 5;
gNumberOfImages = 5;

gImages = new Array(gNumberOf Images);
gImages[0] = "yumtilicious.j pg";
gImages[1] = "yumtilicious1. jpg";
gImages[2] = "yumtilicious2. jpg";
gImages[3] = "yumtilicious3. jpg";
gImages[4] = "yumtilicious4. jpg";

function canManipulateIm ages() {
if (document.image s)
return true;
else
return false;
}
function loadSlide(image URL) {
if (gImageCapableB rowser) {
document.ylic.s rc = imageURL;
return false;
}
else {
return true;
}
}
function nextSlide() {
gCurrentImage = (gCurrentImage + 1) % gNumberOfImages ;
loadSlide(gImag es[gCurrentImage]);
}
gImageCapableBr owser = canManipulateIm ages();
gCurrentImage = 0;
setInterval("ne xtSlide()",gSli deshowInterval * 1000);
// -->
</SCRIPT>

</head>

<body>
<td align="center"> <a href="yumtiholi days.html"><img src="yumtiholid ays.jpg" alt="Maldives" width="300" height="167" border="0" name="yhol" /></a></td>
<td align="center"> <a href="yumtilici ous.html"><img src="yumtilicio us.jpg" alt="Feed me" width="300" height="167" border="0" name="ylic" /></a></td>


When I only put in the first javascript for yumtiholidays the images rotate fine but the moment I put in the second for yumtilicious the one stops working. Also I need to have it activated by the mouseover function.

[acoder]

You've redefined the same functions. You need to rename the second set for them to work together or you could reuse the same functions by calling them.

Secondly, you have used gImages again. You need to rename that otherwise you have overwritten the previous code.

To run it onmouseover, move the setInterval line into the onmouseover event handler:
[HTML]<img ... onmouseover="se tInterval(...)" >[/HTML] Mind the quotes - make sure you don't mix them up.
Don't forget to clear the interval onmouseout.

[Ohann]

You've redefined the same functions. You need to rename the second set for them to work together or you could reuse the same functions by calling them.

Secondly, you have used gImages again. You need to rename that otherwise you have overwritten the previous code.

To run it onmouseover, move the setInterval line into the onmouseover event handler:
[HTML]<img ... onmouseover="se tInterval(...)" >[/HTML] Mind the quotes - make sure you don't mix them up.
Don't forget to clear the interval onmouseout.

Hi there

Thanks for all your help up to now.
Everything seems to be working fine now except that my clear interval on mousout is not working

Is this what it should look like?

onmouseover="se tInterval('next Slide()',gSlide showInterval * 1500)" onmouseout="cle arInterval"(gSl ideshowInterval * 1500)"

I have also tried it like this:
onmouseout="cle arInterval('nex tSlide()',gSlid eshowInterval * 1500)"


Thanks

[acoder]

For clearInterval, see this example. Pass the ID returned by setInterval.