Pause JavaScript Image Rotation When Mouse is Over Images

We are using a Javascript Based Image rotation script, and it works well.  We need to pause the script from running when the mouse is hovered over an image.  So, if there are five images that rotate, one every three seconds, we want the process to pause if a user puts their mouse over the image and then resume when they move the mouse off the images.  

The current code is below.  If you know of an alternate script that performs the required functions above, and allows the five images to be rotated as set forth in the script, feel free to post it.  Otherwise, editing the script below is perfectly fine.  
// Included Function named image_rotate.js
// Note - Code used on HTML page is found at end of this script
 
function Banner(refreshTime, width, height, altText, start, random){
	this.objName = "bannerAd" + (Banner.count++);
	eval(this.objName + "=this");
	if (!refreshTime) this.refreshTime = 5000; else this.refreshTime = refreshTime*1000;
	if (!width) this.width = 460; else this.width = width;
	if (!height) this.height = 68; else this.height = height;
	if (random == null) this.random = 1; else this.random = random;
	this.altText = altText;
	this.ads = [];
	if (start) this.currentAd = start-1; else start = null;
	this.mySize = 0;
 
	this.Ad = function(src, href, target, mouseover) {
		var tempImage = new Image();
		tempImage.src = src;
		this.ads[this.mySize] = new Object();
		var ad = this.ads[this.mySize];
		ad.src = src;
		if (typeof(target) == "undefined" || target == null) ad.target = "_self"; else ad.target = target;
		ad.href = href;
		ad.mouseover = mouseover;
		this.mySize++;
	}
 
	this.link = function(){
		var	ad = this.ads[this.currentAd];
		if (ad.target == "_self"){
			location.href = ad.href;
		}
		else if (ad.target == "_blank" || ad.target == "_new"){
			open(ad.href,this.objName + "Win");
		}
		else top.frames[ad.target].location.href = ad.href;
	}
 
	this.showStatus = function(){
		var ad = this.ads[this.currentAd];
		if (ad.mouseover) status = ad.mouseover;
		else status = ad.href;
	}
 
	this.randomAd = function(){
		var n;
		do { n = Math.floor(Math.random() * (this.mySize)); } 
		while(n == this.currentAd);
		this.currentAd = n;
	}
 
	this.output = function(){
		var tempCode = "";
		if (this.mySize > 1){
			if (this.currentAd == null) this.randomAd();
			if (this.currentAd >= this.mySize) this.currentAd = this.mySize - 1;
			<!--tempCode = '<a href="javascript:'+this.objName+'.link();"';
			<!--tempCode += ' onMouseOver="' + this.objName + '.showStatus(); return true"';
			<!--tempCode += ' onMouseOut="status=\'\';return true">';
			tempCode += '<img src="' + this.ads[this.currentAd].src + '" width="' + this.width;
			tempCode += '" name="' + this.objName + 'Img" height="' + this.height + '" ';
			if (this.altText) tempCode += 'alt="'+this.altText + '" ';
			tempCode += 'border="0" /></a>';
			document.write(tempCode);
			this.nextAd();
		} else document.write("Error: two banners must be defined for the script to work.");
	}
 
	this.newAd = function(){
		if (!this.random){	
			this.currentAd++;
			if (this.currentAd >= this.mySize)
			   this.currentAd = 0;
		}
		else {
			this.randomAd();
		}
		this.nextAd();
	}
 
	this.nextAd = function(){
		document.images[this.objName+ 'Img'].src = this.ads[this.currentAd].src;
		setTimeout(this.objName+'.newAd()',this.refreshTime)
	}
}
Banner.count = 0;
 
// Code on HTML page to rotate the actual images
 
<script src="inc/image_rotate.js" type="text/javascript"></script>
<script type="text/javascript"><!--
// 
myAd = new Banner( 5, 604, 324, "Images", 1, 0 );
myAd.Ad( "images/home1.jpg", "javascript:;", null, "Home Image 1" );
myAd.Ad( "images/home2.jpg", "javascript:;", null, "Home Image 2" );
myAd.Ad( "images/home3.jpg", "javascript:;", null, "Home Image 3" );
myAd.Ad( "images/home4.jpg", "javascript:;", null, "Home Image 4" );
myAd.Ad( "images/home5.jpg", "javascript:;", null, "Home Image 5" );
myAd.output();
// --></script>

Open in new window

archangelmanAsked:
Who is Participating?
 
hard2u2001Connect With a Mentor Commented:
Try this code. It works fine.
I have tested it.
And also added comments with name "hard2u2001"
So u can understand changes
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
 <head>
  <title> new document </title>
  <meta name="generator" content="editplus">
  <meta name="author" content="">
  <meta name="keywords" content="">
  <meta name="description" content="">
  <script>
	// Included Function named image_rotate.js
	// Note - Code used on HTML page is found at end of this script
	 
	function Banner(refreshTime, width, height, altText, start, random){
			this.objName = "bannerAd" + (Banner.count++);
			eval(this.objName + "=this");
			if (!refreshTime) this.refreshTime = 5000; else this.refreshTime = refreshTime*1000;
			if (!width) this.width = 460; else this.width = width;
			if (!height) this.height = 68; else this.height = height;
			if (random == null) this.random = 1; else this.random = random;
			this.altText = altText;
			this.ads = [];
			if (start) this.currentAd = start-1; else start = null;
			this.mySize = 0;
	 
			this.Ad = function(src, href, target, mouseover) {
					var tempImage = new Image();
					tempImage.src = src;
					this.ads[this.mySize] = new Object();
					var ad = this.ads[this.mySize];
					ad.src = src;
					if (typeof(target) == "undefined" || target == null) ad.target = "_self"; else ad.target = target;
					ad.href = href;
					ad.mouseover = mouseover;
					this.mySize++;
			}
	 
			this.link = function(){
					var     ad = this.ads[this.currentAd];
					if (ad.target == "_self"){
							location.href = ad.href;
					}
					else if (ad.target == "_blank" || ad.target == "_new"){
							open(ad.href,this.objName + "Win");
					}
					else top.frames[ad.target].location.href = ad.href;
			}
	 
			this.showStatus = function(){
					var ad = this.ads[this.currentAd];
					if (ad.mouseover) status = ad.mouseover;
					else status = ad.href;
			}
	 
			this.randomAd = function(){
					var n;
					do { n = Math.floor(Math.random() * (this.mySize)); } 
					while(n == this.currentAd);
					this.currentAd = n;
			}
	 
			this.output = function(){
					var tempCode = "";
					if (this.mySize > 1){
							if (this.currentAd == null) this.randomAd();
							if (this.currentAd >= this.mySize) this.currentAd = this.mySize - 1;
							<!--tempCode = '<a href="javascript:'+this.objName+'.link();"';
							<!--tempCode += ' onMouseOver="' + this.objName + '.showStatus(); return true"';
							<!--tempCode += ' onMouseOut="status=\'\';return true">';
							/*
							* Start->Added mouseover and mouseout evebnts on image by hard2u2001
							*/
							tempCode += '<img onmouseover= "' + this.objName + '.pause();" onmouseout= "' + this.objName + '.start();" src="' + this.ads[this.currentAd].src + '" width="' + this.width;
							/*
							* Added mouseover and mouseout evebnts on image by hard2u2001<-End
							*/
							tempCode += '" name="' + this.objName + 'Img" height="' + this.height + '" ';
							if (this.altText) tempCode += 'alt="'+this.altText + '" ';
							tempCode += 'border="0" /></a>';
							document.write(tempCode);
							this.start();
							//this.nextAd();
					} else document.write("Error: two banners must be defined for the script to work.");
			}
	 
			this.newAd = function(){
					if (!this.random){      
							this.currentAd++;
							if (this.currentAd >= this.mySize)
							   this.currentAd = 0;
					}
					else {
							this.randomAd();
					}
					this.nextAd();
			}
	 
			this.nextAd = function(){
					document.images[this.objName+ 'Img'].src = this.ads[this.currentAd].src;
					/*
					* Function call commented by hard2u2001
					*/
					//setTimeout(this.objName+'.newAd()',this.refreshTime)
			}
			/*
			* Start->Added New Functions by hard2u2001
			*/
			this.pause = function(){
				clearInterval(this.timer);
			}
			this.start = function(){
				this.timer = setInterval(this.objName+'.newAd()',this.refreshTime);
			}
			/*
			* Added New Functions by hard2u2001<-End
			*/
	}
	Banner.count = 0;
	 
  </script>
  <script type="text/javascript">
			myAd = new Banner( 1, 604, 324, "Images", 1, 0 );
			myAd.Ad( "images/home1.jpg", "javascript:;", null, "Home Image 1" );
			myAd.Ad( "images/home2.jpg", "javascript:;", null, "Home Image 2" );
			myAd.Ad( "images/home3.jpg", "javascript:;", null, "Home Image 3" );
			myAd.Ad( "images/home4.jpg", "javascript:;", null, "Home Image 4" );
			myAd.Ad( "images/home5.jpg", "javascript:;", null, "Home Image 5" );
			myAd.output();
	</script>
 </head>
 
 <body>
	
 </body>
</html>

Open in new window

0
 
Michel PlungjanIT ExpertCommented:
try this (not tested)

change this
  this.nextAd = function(){
    document.images[this.objName+ 'Img'].src = this.ads[this.currentAd].src;
    setTimeout(this.objName+'.newAd()',this.refreshTime)
  }
}
Banner.count = 0;
 
to
 
  this.nextAd = function(){
    document.images[this.objName+ 'Img'].src = this.ads[this.currentAd].src;
    tIds[this.objName]=setTimeout(this.objName+'.newAd()',this.refreshTime)
  }
}
Banner.count = 0;
var tIds = new Array();
 
and add this to the onLoad
for (var i=0;i<Banner.count;i++) {
  document.images["bannerAd"+i+"Img"].onmouseover=function() { clearTimeout(tIds["bannerAd"+i]) }
  document.images["bannerAd"+i+"Img"].onmouseout=function() { Banner["bannerAd"+i].nextAd() }
}

Open in new window

0
 
Michel PlungjanIT ExpertCommented:
Ahh, I did not see the IMG tag code

Better to be OO too.
0
 
hard2u2001Commented:
Sorry I didn't get ur comment. Please let me know where I was wrong. I just made 2 changes in ur code.

                       /*
                  * Start->Added New Functions by hard2u2001
                  */
                  this.pause = function(){
                        clearInterval(this.timer);
                  }
                  this.start = function(){
                        this.timer = setInterval(this.objName+'.newAd()',this.refreshTime);
                  }
                  /*
                  * Added New Functions by hard2u2001<-End
                  */


called this.start(); instead of this.nextAd(); in this.output() and added mouseover and mouseout events to ur "<img>" code which was already there.
0
 
archangelmanAuthor Commented:
Thank you very much for the prompt followup.  
0
All Courses

From novice to tech pro — start learning today.