rollover triggers rotation

[the other john]

I am looking for ideas on how to create a rollover that triggers an
image rotation in another location. I know how to create a function
for basic rollovers, image swapping sort of thing, but I know know how
to create the rotation.

This is what the client wants...
....create a circle of images, each of which will trigger an image
rotation in the center of this circle until the mouseout.

Yea, I'm a little green with js.

Thanks.

 

[ASM]

the other john a écrit :

I am looking for ideas on how to create a rollover that triggers an
image rotation in another location. I know how to create a function
for basic rollovers, image swapping sort of thing, but I know know how
to create the rotation.

This is what the client wants...
...create a circle of images, each of which will trigger an image
rotation in the center of this circle until the mouseout.

all images same size
8 (or 6, or 10) images around central one.

<script type="text/javascript">
var what=0;
var imgNext, picts;
onload = function() {
picts = document.getElementById('myPicts');
picts = picts.getElementsByTagName('IMG');
}
function rotate(what,timer) {
if(what == (picts.length/2)) what == (picts.length/2)+1;
if(what == picts.length) what = 0;
picts[picts.length/2].src = picts[what].src;
what++;
imgNext = setTimeout('rotate('+what+';'+timer+')',timer);
}
</script>
<div id="myPicts">
<img src="img1.jpg"><img src="img2.jpg"><img src="img3.jpg"><br>
<img src="img4.jpg">
<img src="img0.jpg"
onmouseover="rotate(0,800)"
onmouseover="clearTimeout(imgNext);">
<img src="img5.jpg"><br>
<img src="img6.jpg"><img src="img7.jpg"><img src="img8.jpg">
</div>


or

<script type="text/javascript">
var what=0;
var imgNext, p, picts;
function collectImages() {
p = document.getElementById('myPicts');
p = p.getElementsByTagName('IMG');
picts = new Array();
for(var i=0;i<p.length;i++) {
picts = new Image();
picts.src = p.src;
}
}
onload = collectImages;
function rotate(what,timer) {
if(what == picts.length) what = 0;
p[p.length/2].src = picts[what].src;
what++;
imgNext = setTimeout('rotate('+what+';'+timer+')',timer);
}
</script>
<div id="myPicts">
<img src="img1.jpg"><img src="img2.jpg"><img src="img3.jpg"><br>
<img src="img4.jpg">
<img src="img0.jpg"
onmouseover="rotate(0,800)"
onmouseover="clearTimeout(imgNext);">
<img src="img5.jpg"><br>
<img src="img6.jpg"><img src="img7.jpg"><img src="img8.jpg">
</div>

 

[the other john]

thanks. now that I can see what you're doing here (takes me time to
figure it out) I can say this isn't exactly what I meant..that is,
there is more than I indicated.

The circle of images is a collection of thumbs. Each thumb represents
a specific product. when the user mousesover each thumb the resulting
"slide show"(lack of better term) rotates example images of for that
product. these rotating images would need to be preloaded but do "not"
appear on the page already. If I'm understanding what you did here
this will create a slide show of this images already present in the
circle of thumbs, correct?

Thanks for the response, it's helps a lot!