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 8 of 8
  1. #1
    New Coder
    Join Date
    Sep 2009
    Posts
    73
    Thanks
    5
    Thanked 9 Times in 9 Posts

    Question Add pause on mouseover to this script?

    Hello everyone,

    1.) I'm not a programmer beyond HTML, CSS and only a basic knowledge of javascript, it doesn't take much for me to get lost beyond my skills in javascript.

    2.) Is someone willing to add and explain the changes to the code below to include a pause on mouseover?

    Code:
    var currentSlide = 1;
    var maxSlides = 0;
    
    function fadeImage(){
    	opacity = 100;
    	if(steps < 4){
    		steps += 1;
    		opacity = opacity / steps;
    		imageObj = document.getElementById("slide-"+currentSlide);
    		imageObjN = document.getElementById("slide-"+nextSlide);
    		imageObjN.style.display = "block";
    
    		imageObj.style.opacity = "" + opacity / 100;
    		imageObjN.style.opacity = "" + ((steps * 25) / 100);
    		//fade
    		slideTimeout = setTimeout("fadeImage()", 170); /** fade transition speed */
    	}else{
    		steps = 1;
    		document.getElementById("slide-"+currentSlide).style.display = "none";
    		currentSlide += 1;
    		if(currentSlide > maxSlides){
    			currentSlide = 1;
    		}
    		showSlide();
    	}
    }
    
    function initSlideshow(){
    	slidesCollection = document.getElementById("slides").children;
    	maxSlides = slidesCollection.length;
    	for (var i=0; i < maxSlides; i++){
    		slidesCollection[i].id = "slide-"+(i+1);
    		if (i > 0)
    			slidesCollection[i].style.display = "none";
    	}	
    	steps = 1;
    	nextSlide = 2;
    	slideTimeout = 0;
    	showSlide();
    }
    
    function showSlide(){
    	clearTimeout(slideTimeout);
    		
    	nextSlide = currentSlide + 1;
    	if (currentSlide >= maxSlides){
    		nextSlide = 1;
    	}
    	
    	slideTimeout = setTimeout("fadeImage()", 8300); /** display time of slide */
    }

  • #2
    New Coder
    Join Date
    Aug 2005
    Posts
    71
    Thanks
    9
    Thanked 3 Times in 3 Posts

    Need just a little more info

    it appears from the script that this is for a slide show that takes a collection of pics and displays them one by one for about 8 seconds then fades into the next pic. is this correct?

    if so, then you state you want a pause on mouseover, I presume for when an image appears that you want to view for longer than the 8 seconds. if this is the case, then you need an OnMouseOver event that stops the function showSlide then resumes on mouse out.

    To build this, it requires an event listener and an event handler. You could search for OnMouseOver and OnMouseOut scripts that you may be able to adapt to your script. Here's a good place to start if you want to tackle this yourself.

    http://javascript.about.com/library/bldom19.htm

    The listener would be attached to the image element.
    It's OK to pee against the wind if your standing in a lake.

  • #3
    New Coder
    Join Date
    Sep 2009
    Posts
    73
    Thanks
    5
    Thanked 9 Times in 9 Posts

    Question

    Thanks for the reply, the event handler option started out ok and then got a little over my head to follow, but I do understand the concept of what you proposed. So.... in an effort to try and get a function like you suggested to work I used the code below, the problem is it successfully creates a pause of the slideshow but... onmouseout isn't working, slidshow does not pick back up where it left off. Any suggestions on this code and how to make it work??
    Code:
    <div class="slide"><img src="images/intro2.png" width="680" height="349" onmouseover="window.setInterval(showSlide,1000);" onmouseout="window.clearInterval(showSlide);" /></div>
    Last edited by ARCLite Studio; 07-16-2011 at 04:25 AM. Reason: Excessive typos, lack of sleep

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    #slides {
      position:relative;width:200px;height:150px;
    }
    
    #slides IMG{
      position:absolute;left:0px;top:0px;
    }
    /*]]>*/
    </style>
    <script type="text/javascript">
    /*<![CDATA[*/
    var currentSlide = 1;
    var maxSlides = 0;
    var dly=null;
    var FadeIncrement=2; /** fade transition speed */
    var Run=true;
    var Hold=1000;
    
    function fadeImage(){
    	opacity = 100;
    	if(steps < 100){
    		steps +=FadeIncrement;
    		imageObj = slidesCollection[currentSlide];
    		imageObjN = slidesCollection[nextSlide];
    		imageObjN.style.display = "block";
            zxcOpacity(imageObj,100-steps)
            zxcOpacity(imageObjN,steps)
    		slideTimeout = setTimeout("fadeImage()",20);
    	}
        else {
            zxcOpacity(imageObj,0);
            zxcOpacity(imageObjN,100);
            steps = 0;
    		slidesCollection[currentSlide].style.display = "none";
            if (Run){
    	     showSlide();;
            }
    	}
    }
    
    function Pause(){
     clearTimeout(dly);
     Run=false;
    }
    
    function Auto(){
     clearTimeout(dly);
     Run=true;
     dly=setTimeout(function(){ showSlide(); },500);
    }
    
    function zxcOpacity(obj,opc){
     obj.style.filter='alpha(opacity='+opc+')';
     obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
    }
    
    function initSlideshow(){
    	var clds = document.getElementById("slides").childNodes,nu=0;
    	slidesCollection=[];
    	for (var i=0; i < clds.length; i++){
         if (clds[i].nodeType==1){
          clds[i].style.display=slidesCollection.length>0?'none':'block'
          slidesCollection.push(clds[i]);
         }
    	}
    	steps = 0;
    	nextSlide = 2;
    	slideTimeout = 0;
    	showSlide();
    }
    
    function showSlide(){
    	clearTimeout(slideTimeout);
    	currentSlide=++currentSlide%slidesCollection.length;
    	nextSlide = currentSlide + 1;
    	if (nextSlide == slidesCollection.length){
    		nextSlide = 0;
    	}
    
    	slideTimeout = setTimeout("fadeImage()", Hold); /** display time of slide */
    }
    /*]]>*/
    </script></head>
    
    <body onload="initSlideshow()" >
    <div id="slides" onmouseover="Pause();" onmouseout="Auto();">
     <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" />
     <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" />
     <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" />
     <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" />
    </div>
    
    </body>
    
    </html>
    now X-Browser
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #5
    New Coder
    Join Date
    Sep 2009
    Posts
    73
    Thanks
    5
    Thanked 9 Times in 9 Posts

    Question Almost there, slight problem in suggested script

    Let me first say thank you to Mr. Phillips as the code he offered is functional and exactly what i was in need of. Everyone else thank you as well I have looked into each suggestion and been able to learn more than i knew before but wasn't able to implement the functionality. (I'll figure/learn it in due time).


    Here is the problem with the suggested code from Vic,


    On initial page load, the script loads image 1, then overlays image 4 without a transition, then fades both image 1 and 4 out, fades image 1 back in and finally processes the images in the proper order with transitions.

    You can view the problem live here:

    http://arclitestudio.com/arc/

    Any idea on why that is occurring and how to fix it?

  • #6
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    try

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    #slides {
      position:relative;width:680px;height:349px;
    }
    
    #slides IMG{
      position:absolute;visibility:hidden;left:0px;top:0px;width:680px;height:349px;
    }
    /*]]>*/
    </style>
    <script type="text/javascript">
    /*<![CDATA[*/
    var currentSlide = 1;
    var dly=null;
    var FadeIncrement=2; /** fade transition speed */
    var Run=true;
    var Hold=1000;
    
    function fadeImage(){
    	opacity = 100;
    	if(steps < 100){
    		steps +=FadeIncrement;
    		imageObj = slidesCollection[currentSlide];
    		imageObjN = slidesCollection[nextSlide];
    		imageObjN.style.visibility = "visible";
            zxcOpacity(imageObj,100-steps)
            zxcOpacity(imageObjN,steps)
    		slideTimeout = setTimeout("fadeImage()",20);
    	}
        else {
            zxcOpacity(imageObj,0);
            zxcOpacity(imageObjN,100);
    		slidesCollection[currentSlide].style.visibility = "hidden";
            if (Run){
    	     showSlide();;
            }
    	}
    }
    
    function Pause(){
     clearTimeout(dly);
     Run=false;
    }
    
    function Auto(){
     clearTimeout(dly);
     Run=true;
     dly=setTimeout(function(){ showSlide(); },500);
    }
    
    function zxcOpacity(obj,opc){
     obj.style.filter='alpha(opacity='+opc+')';
     obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
    }
    
    function initSlideshow(){
    	var clds = document.getElementById("slides").childNodes,nu=0;
    	slidesCollection=[];
    	for (var i=0; i < clds.length; i++){
         if (clds[i].nodeType==1){
          clds[i].style.visibility=slidesCollection.length>0?'hidden':'visible'
          slidesCollection.push(clds[i]);
         }
    	}
    	steps = 0;
    	nextSlide = 2;
    	slideTimeout = 0;
    	showSlide();
    }
    
    function showSlide(){
    	clearTimeout(slideTimeout);
        steps = 0;
    	currentSlide=++currentSlide%slidesCollection.length;
    	nextSlide = currentSlide + 1;
    	if (nextSlide == slidesCollection.length){
    		nextSlide = 0;
    	}
    
    	slideTimeout = setTimeout("fadeImage()", Hold); /** display time of slide */
    }
    /*]]>*/
    </script></head>
    
    <body onload="initSlideshow()" >
    <div id="slides" onmouseover="Pause();" onmouseout="Auto();">
    <img src="http://arclitestudio.com/arc/images/intro1.png" />
    <img src="http://arclitestudio.com/arc/images/intro2.png" />
    <img src="http://arclitestudio.com/arc/images/intro3.png" />
    <img src="http://arclitestudio.com/arc/images/intro4.png" />
    </div>
    
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #7
    New Coder
    Join Date
    Sep 2009
    Posts
    73
    Thanks
    5
    Thanked 9 Times in 9 Posts

    Arrow

    Vic,

    That change did correct the prior problem, Thank you. I do have something else in that same code though. The pause on mouseover executes on entry of the NEXT slide and not the one the mouse actually entered on.

    Thus if image1 is being displayed and I mouseover it, image1 will finish its display cycle, fade out, fade image2 in and then pause until mouseout.

    I need the pause to occur on whatever slide/image is being displayed at the time of the mouseover since that is the one the person will be wanting to read or see.

    Robert

  • #8
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    onmouseover stops changing the the image.

    if the image opacity is greater than 0(still not visible) it will continue to fade in and become visible.

    You could increase Hold and FadeIncrement
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/


  •  

    Posting Permissions

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