...

View Full Version : 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?



<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
<!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:


<!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.

papashank
11-02-2013, 09:50 PM
Thank you 'chump2877' for all your work on this slideshow; I really do appreciate it!

Based on the script you posted however, I cannot get each image to link to a separate website ( or page; would you please look at what I have done with your script and show me how to make this happen?

( I have tried every which way I could think of, but I cannot make this work! )

<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://aviatorscustoms.files.wordpress.com/2012/05/mopar-muscle-cars_1600x1200.jpg

", "http://www.blirk.net/wallpapers/1024x768/muscle-car-wallpaper-13.jpg",

"http://image.hotrod.com/f//wallpapers/muscle_car_hot_rod_desktops/28332565+w1600+h1

200+st0/hrdp_muscle_car_hot_rod_desktops_47_o+1600x1200_hot_rod_wallpapers.jpg"];
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://aviatorscustoms.files.wordpress.com/2012/05/mopar-muscle-cars_1600x1200.

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()", 3000);
}

function slidelink()
{
window.location.href = "http://www.truthinliving.org",

"http://www.charlesshank.blogspot.com", "http://www.horseflyeqine.com",

"http://www.horseflyequine.com" + whichimage + "html";[/COLOR]
}

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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum