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.getEle mentById('myPic ts');
picts = picts.getElemen tsByTagName('IM G');
}
function rotate(what,tim er) {
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('rot ate('+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="ro tate(0,800)"
onmouseover="cl earTimeout(imgN ext);">
<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.getEle mentById('myPic ts');
p = p.getElementsBy TagName('IMG');
picts = new Array();
for(var i=0;i<p.length; i++) {
picts[i] = new Image();
picts[i].src = p.src;
}
}
onload = collectImages;
function rotate(what,tim er) {
if(what == picts.length) what = 0;
p[p.length/2].src = picts[what].src;
what++;
imgNext = setTimeout('rot ate('+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="ro tate(0,800)"
onmouseover="cl earTimeout(imgN ext);">
<img src="img5.jpg"> <br>
<img src="img6.jpg"> <img src="img7.jpg"> <img src="img8.jpg">
</div>
--
Stephane Moriaux et son [moins] vieux Mac