help with image rollover

hi everyone
i have image rollover code. and i want to add functionality, for ex-this scripts roll overs images (slides them) . i would like let it stops when onmouseover event
here is script

<html>
<head>
    <title>HTML ders | 09.07.2010</title>
<script>
var sekil1=new Image();
sekil1.src="bir.jpg";
var sekil2=new Image();
sekil2.src="iki.jpg";
var sekil3=new Image();
sekil3.src="uc.jpg";
var sekil4=new Image();
sekil4.src="dord.jpg";
var sekil5=new Image();
sekil5.src="bes.jpg";

</script>
    
    
    
</head>
<body>
    
    
    
    <img name="az" src="bir.jpg" width="250" height="200">
    <script>
    var addim=1;
    function slide(){
        
        if(!document.images)
        return 
    
    document.images.az.src=eval("sekil"+addim+".src")
    if(addim<5)
    addim++
    else
    addim=1
        
        setTimeout("slide()", 2500);
        
        
    }
    slide();
    
    </script>
</body>
</html>

thanks in advance

azegurb

Posting Whiz in Training

244 posts since Sep 2009

Reputation Points: 11

Solved Threads: 2

1 Year Ago

You may add a global variable to keep the ID of your setTimeout. Then, use that variable to clearTimeout() when onmouseover, but setTimeout() again when onmouseout.

//example
var t
t = setTimeout("slide()", 2500);

//in function when onmouseover
function mover() {
  clearTimeout(t)  // not sure if you need window.clearTimeout()
}

//in function when onmouseout
function mout() {
  t = setTimeout("slide()", 2500)
}

Taywin

Posting Virtuoso

1,727 posts since Apr 2010

Reputation Points: 229

Solved Threads: 239

1 Year Ago

thank you for attention but i tested it doesnt work

azegurb

Posting Whiz in Training

244 posts since Sep 2009

Reputation Points: 11

Solved Threads: 2

1 Year Ago

Hi Aze, try this ....

<head>
<title>HTML ders | 09.07.2010</title>
<script>
onload = function() {
	sekil = [ "bir.jpg", "iki.jpg", "uc.jpg", "dord.jpg", "bes.jpg" ];
	sekil.x = 0;
	sekil.allowSlide = true;
	sekil.tim = null;
	sekil.slide = function() {
		if( !document.images || !sekil.allowSlide ) { return; }
		clearTimeout(sekil.tim);
		document.images.az.src = sekil[sekil.x];
		document.getElementById('caption').innerHTML = sekil[sekil.x];
		sekil.x = ++sekil.x % 5;
		sekil.slideDelay();
	}
	sekil.slideDelay = function() {
		sekil.tim = setTimeout(function(){sekil.slide();}, 2500);
	}
	document.images.az.onmouseover = function(){ sekil.allowSlide = false; }
	document.images.az.onmouseout  = function(){ sekil.allowSlide = true; sekil.slide(); }
	sekil.slideDelay();
};
</script>
</head>

<body>
<img name="az" src="bir.jpg" width="250" height="200">
<div id="caption">bir.jpg</div>
</body>
</html>

Airshow

Airshow

WiFi Lounge Lizard

Moderator

2,683 posts since Apr 2009

Reputation Points: 321

Solved Threads: 372

1 Year Ago

Thank you very much Airshow. It works fine

azegurb

Posting Whiz in Training

244 posts since Sep 2009

Reputation Points: 11

Solved Threads: 2

This question has already been solved

You