| re: mouseout stopping a function
the other john wrote on 12 mei 2006 in comp.lang.javascript:
[color=blue]
> I have a function that is activated by a mouseover. The function
> triggers an image rotation. I need to stop the rotation on the
> mouseout but I don't know how to do this. the mouseover triggers the
> rotate() function below. currently the mouseout produces the default
> image but then it keeps cycling the other images.
>
> <script language="javascript" type="text/javascript">[/color]
Do not use language="javascript" anymore
[color=blue]
> if(document.images) {
> bubbles = new Image
> off = new Image
> bubbles.src = "images/bubbles.jpg"
> off.src = "default.jpg"
>}
> else {
> bubbles = ""
> off = ""
>}[/color]
I don't know why you need the above code.
After all you are not preloading all images you use.
[color=blue]
> adImages = new Array("images/whitemarble.jpg", "images/bubbles.jpg",
> "images/oak.jpg")
> thisAd = 0
>
> imgCt = adImages.length[/color]
use var in defining new variables.
var imgCt = adImages.length;
var myInterval;
etc.
var ImgField = document.getElementById('ImgField'); //see below
[color=blue]
>
> function rotate() {
> if (document.images) {
> thisAd++
> if(thisAd == imgCt) {
> thisAd = 0
> }[/color]
You will see see number 0 last this way
[color=blue]
> document.ImgField.src=adImages[thisAd][/color]
Use ID and getElementById() bor a better cross-browser compatibility:
ImgField.src=adImages[thisAd]
delete the below line:
[color=blue]
> setTimeout("rotate()", 3 * 1000)
> }
>}
> </script>[/color]
and do:
onmouseover = 'myInterval = setInterval("rotate()", 3e3);'
onmouseout =
'clearInterval(myInterval);imgField.src="images/default.jpg"'
==============
Try in the <head>:
<script type='text/javascript'>
var adImages =
['images/whitemarble.jpg','images/bubbles.jpg','images/oak.jpg']
var imgCt = adImages.length;
var imageHolder = new Array;
for (var i=0;i<imgCt;i++){ // preloader
imageHolder[i] = new Image()
imageHolder[i].src = adImages[i]
}
var thisAd = 0;
var myInterval;
function rotate() {
document.getElementById('ImgField').src =
imageHolder[thisAd].src
if (++thisAd == imgCt) thisAd = 0
}
</script>
[not tested]
--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress) |