Slide show pause on hover issue

sonicmayhem · 01-01-2012, 12:18 AM

Hello,

I just have a quick question; what code would I need to insert into the coding below in order to get the slide show to pause
when someone hovers their cursor on an image?

Code:

<html>
<head>
<script type="text/javascript">
<!--
//preload images
var image1=new Image()
image1.src="firstcar.gif"
var image2=new Image()
image2.src="secondcar"
var image3=new Image()
image3.src="thirdcar.gif"
//-->
</script>
</head>
<body>
<a href="javascript:slidelink()">
<img src="firstcar.gif" name="slide" border="0" width="100" height="56" /></a>
<script type="text/javascript">
<!--
var step=1
var whichimage=1
function slideit(){
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
whichimage=step
if (step<3)
step++
else
step=1
setTimeout("slideit()",1800)
}
slideit()
function slidelink(){
if (whichimage==1)
window.location="link1.htm"
else if (whichimage==2)
window.location="link2.htm"
else if (whichimage==3)
window.location="link3.htm"
}
//-->
</script>
</body>
</html>

Thanks in advance! I'm newer to coding this stuff and have tried various ways to get this to work, ending in failure of course.

chump2877 · 01-01-2012, 03:54 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
	<title>TITLE</title>
	<script type="text/javascript">
		//preload images
		var imgs = ["http://www.codingforums.com/img/cfnewyear.jpg", "http://www.codingforums.com/images/buttons/post_thanks.gif", "http://www.codingforums.com/images/buttons/reply.gif"];
		var loadedImgs = []
		for (var i=0; i<imgs.length; i++)
		{
			loadedImgs[i] = new Image();
			loadedImgs[i].src = imgs[i];
		}
	</script>
</head>
<body>
	<img src="http://www.codingforums.com/img/cfnewyear.jpg" id="slide" style="border:0;cursor:pointer" />
	<script type="text/javascript">
		var slideImg = document.getElementById('slide');
		var step = 0;
		var whichimage = 0;
		var timer;

		function slideit()
		{
			if (!document.images) return;
			slideImg.src = loadedImgs[step].src;
			whichimage = step;
			step = (step < 2) ? step + 1 : 0;
			timer = setTimeout("slideit()", 1800);
		}

		function slidelink()
		{
			window.location.href = "link" + whichimage + ".html";
		}

		window.onload = function()
		{
			slideImg.onclick = slidelink;
			slideImg.onmouseover = function(timeElapsed)
			{
				clearTimeout(timer);
			};
			slideImg.onmouseout = function(timeElapsed)
			{
				timer = setTimeout("slideit()", 900);
			};
			slideit();
		};
	</script>
</body>
</html>

sonicmayhem · 01-02-2012, 12:37 AM

Wow that works great! Thanks a lot for this; really appreciate it!

sonicmayhem · 01-07-2012, 05:09 PM

Hello chump2877,

This script is so awesome, but I have a quick question (this after some failed attempts of my own); what code would I need to add to this in order to have images fade out/in from image to image, and be able to adjust the time it takes between transition?

Thanks in advance!

chump2877 · 01-13-2012, 01:03 AM

Hi, sry for taking so long to get back to you.

I'm a bit tired at the moment, but I played around with the code, and I believe this is generally what you are after:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
	<title>TITLE</title>
	<script type="text/javascript">
		//preload images
		var imgs = ["http://www.codingforums.com/img/cfnewyear.jpg", "http://www.codingforums.com/images/buttons/post_thanks.gif", "http://www.codingforums.com/images/buttons/reply.gif"];
		var loadedImgs = []
		for (var i=0; i<imgs.length; i++)
		{
			loadedImgs[i] = new Image();
			loadedImgs[i].src = imgs[i];
		}
	</script>
</head>
<body>
	<img src="http://www.codingforums.com/img/cfnewyear.jpg" id="slide" style="border:0;cursor:pointer" />
	<script type="text/javascript">
		var slideImg = document.getElementById('slide');
		var step = 1;
		var whichimage = 0;
		var timer;
		var FADE_INTERVAL = 3600;

		function slideit(dir)
		{
			slideImg.src = loadedImgs[step].src;
			whichimage = step;
			step = (step < 2) ? step + 1 : 0;
			if (dir == 2)
			{
				timer = new Timer(function(){fade(dir,1);}, FADE_INTERVAL);
			}
			else
			{
				fade(dir,0);
			}
		}

		function fade(dir, opLevel)
		{
			opLevel = (dir == 2) ? opLevel - .05 : opLevel + .05;
			slideImg.style.filter = "alpha(opacity="+opLevel*100+")";
			slideImg.style.opacity = opLevel;
			slideImg.style.MozOpacity = (opLevel == 1) ? '.99' : opLevel;
			if (dir == 2)
			{
				if (opLevel > 0)
				{
					timer = new Timer(function() {fade(dir,opLevel);}, 50);
				}
				else
				{
					slideit(1);
				}
			}
			else
			{
				if (opLevel < 1)
				{
					timer = new Timer(function() {fade(dir,opLevel);}, 50);
				}
				else
				{
					timer = new Timer(function() {fade(2,1);}, FADE_INTERVAL);
				}
			}
		}

		function Timer(callback, delay)
		{
			var timerId, start, remaining = delay;

			this.pause = function()
			{
				clearTimeout(timerId);
				remaining -= new Date() - start;
			};

			this.resume = function()
			{
				start = new Date();
				timerId = setTimeout(callback, remaining);
			};

			this.resume();
		}

		function slidelink()
		{
			window.location.href = "link" + whichimage + ".html";
		}

		window.onload = function()
		{
			slideImg.onclick = slidelink;
			slideImg.onmouseover = function()
			{
				timer.pause();
			};
			slideImg.onmouseout = function()
			{
				timer.resume();
			};
			timer = new Timer(function(){fade(2,1);}, FADE_INTERVAL);
		};
	</script>
</body>
</html>

sonicmayhem · 01-13-2012, 02:16 AM

Hi chump2877,

All I can say is OMFG that is exactly what I was after! Thank you so much man, you have no idea how
much I appreciate this. That is some awesome scripting, thanks again for taking the time to do this! I
owe you an e-beer.