Member Avatar for azegurb

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

  • 3 Contributors
  • 4 Replies
  • 191 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by azegurb
Member Avatar for Taywin

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)
}
Member Avatar for azegurb

thank you for attention but i tested it doesnt work

Member Avatar for Airshow

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

Edited by Airshow because: n/a
Member Avatar for azegurb

Thank you very much Airshow. It works fine

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.