...

View Full Version : Add pause on mouseover to this script?



ARCLite Studio
07-13-2011, 05:53 AM
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?


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 */
}

Budreaux
07-13-2011, 07:17 PM
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.

ARCLite Studio
07-16-2011, 04:22 AM
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??


<div class="slide"><img src="images/intro2.png" width="680" height="349" onmouseover="window.setInterval(showSlide,1000);" onmouseout="window.clearInterval(showSlide);" /></div>

vwphillips
07-16-2011, 04:30 PM
<!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

ARCLite Studio
07-16-2011, 06:35 PM
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?

vwphillips
07-17-2011, 08:51 AM
try


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

ARCLite Studio
07-17-2011, 05:25 PM
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

vwphillips
07-17-2011, 06:51 PM
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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum