Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Slide show pause on hover issue

    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.

  • #2
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,795
    Thanks
    19
    Thanked 156 Times in 147 Posts
    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>
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • Users who have thanked chump2877 for this post:

    sonicmayhem (01-02-2012)

  • #3
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Wow that works great! Thanks a lot for this; really appreciate it!

  • #4
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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!

  • #5
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,795
    Thanks
    19
    Thanked 156 Times in 147 Posts
    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>
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • Users who have thanked chump2877 for this post:

    sonicmayhem (01-13-2012)

  • #6
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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.

  • #7
    New to the CF scene
    Join Date
    May 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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;cursorointer" />
    <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>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •