Image Slideshow Pause onMouseOver

[Tim]

Hope someone in the big wide world can help...

What I want to do is have an image slideshow which automatically
scrolls through a series of images very fast, then pauses when you
move your mouse over the image. The images will flick through (at a
rate of about 5 per second) then pause when the user onMouseOver's.

Any help would be gratefully received.

:o)

[Tim]

Re: Image Slideshow Pause onMouseOver

I apologize, but my knowledge of JavaScript is apparently not that
good. I tried incorporating your code with the existing code I was
trying to use.



****HERE'S THE CODE I'M USING IN THE JAVASCRIPT FILE****

var slideshowAutoma ticSlides = new Array();
var slideshowAutoma ticCurrent = 0;

// Preload slideshow images
function slideshowAutoma ticInit() {
if (document.image s) {
for (var i = 0; i < slideshowAutoma ticImageFiles.l ength; i++) {
slideshowAutoma ticSlides[i] = new Image();
slideshowAutoma ticSlides[i].src = slideshowAutoma ticImageDirecto ry
+ slideshowAutoma ticImageFiles[i];
}
setTimeout('sli deshowAutomatic Forward();',
slideshowAutoma ticDelayBeforeS tart*1000);
}
}

// Show next slide
function slideshowAutoma ticForward() {
if (document.image s && typeof slideshowAutoma ticSlides !=
'undefined') {
slideshowAutoma ticCurrent++;
if (slideshowAutom aticCurrent >= slideshowAutoma ticSlides.lengt h)
slideshowAutoma ticCurrent = 0;
document.images .slideshowAutom atic.src =
slideshowAutoma ticSlides[slideshowAutoma ticCurrent].src;
}
setTimeout('sli deshowAutomatic Forward();',
slideshowAutoma ticDelayBetween Slides*1000);
}




****HERE'S THE CODE I'M USING IN THE BODY OF MY HTML PAGE****

<script language="javas cript" type="text/javascript">
<!--
var slideshowAutoma ticImageDirecto ry = '../images/';
var slideshowAutoma ticImageFiles = new Array('1.gif', '2.gif',
'3.gif');
var slideshowAutoma ticDelayBeforeS tart = 5;
var slideshowAutoma ticDelayBetween Slides = 5;
//-->
</script>

<script language="javas cript" type="text/javascript"
src="slideshow_ automatic.js">
<!--
function slideshowAutoma ticInit() {}
//-->
</script>

<img src="../images/1.gif" name="slideshow Automatic" width="20"
height="21">


*** How is it I go about including your code?? Thanks ever so much.


Martin Honnen <Martin.Honnen@ t-online.de> wrote in message news:<3F30F430. 9020506@t-online.de>...[color=blue]
> Tim wrote:[color=green]
> > Hope someone in the big wide world can help...
> >
> > What I want to do is have an image slideshow which automatically
> > scrolls through a series of images very fast, then pauses when you
> > move your mouse over the image. The images will flick through (at a
> > rate of about 5 per second) then pause when the user onMouseOver's.
> >
> > Any help would be gratefully received.[/color]
>
> Schedule your image change with
> var tid = setInterval('im age change code here', 5000)
> then cancel it onmouseover and restart it onmouseout
> <img onmouseover="cl earInterval(tid );"
> onmouseout="tid = setInterval('.. .', 5000);"[/color]

[Tim]

Re: Image Slideshow Pause onMouseOver

Thanks, that's kinda solved the problem. The only thing is that I
wanted the slideshow to return to it's original frame rate when you
onMouseOut. The method you use requires the user to wait for the timer
to expire. Changing the timer to allow the user 5 seconds before
resuming original frame rate works ok for my purpose though.


"George Ziniewicz" <zin1@cox.net > wrote in message news:<9iyZa.544 89$Ne.12819@fed 1read03>...[color=blue]
> Tim,
>
> To answer your question, you need to simply set a timeout variable using
> mouseover/out to say 1000 or 0.2 for a large or short timer delay, and use
> this variable in your setTimeout function call:
>
> <img src="../images/1.gif" name="slideshow Automatic" width="20"
> height="21"
> onMouseOver='sl ideshowAutomati cDelayBetweenSl ides=1000'
> onMouseOut='sli deshowAutomatic DelayBetweenSli des=0.2'>
>
> In my code I use onClick to set or clear a 1 or 0 flag, which the timer
> functions look at to know what to do.
>
> -------------
>
> You might want to check out my slide show for some ideas:
>
> http://zintel.com/picsel.html
>
> That version isn't cross-browser, it works just on IE 5. I am just
> finishing up a rewrite that works on IE, Netscape and Mozilla that I've
> tested, and features:
>
> toggle play/hold by clicking on a pic
> draggable menu
> forward or reverse play
> sequential or random order
> settable delay
>
> Using IE, it also includes:
> image zoom
> image filters (B&W, color, blends)
> fullscreen toggle slides on a full screen black background
> hideable popup menu
> pausable scrolling info div section
>
>
> zin
>
> "Tim" <timkeay80@msn. com> wrote in message
> news:a59fa7fd.0 308070046.10ac6 3c7@posting.goo gle.com...[color=green]
> > I apologize, but my knowledge of JavaScript is apparently not that
> > good. I tried incorporating your code with the existing code I was
> > trying to use.
> >
> >
> >
> > ****HERE'S THE CODE I'M USING IN THE JAVASCRIPT FILE****
> >
> > var slideshowAutoma ticSlides = new Array();
> > var slideshowAutoma ticCurrent = 0;
> >
> > // Preload slideshow images
> > function slideshowAutoma ticInit() {
> > if (document.image s) {
> > for (var i = 0; i < slideshowAutoma ticImageFiles.l ength; i++) {
> > slideshowAutoma ticSlides[i] = new Image();
> > slideshowAutoma ticSlides[i].src = slideshowAutoma ticImageDirecto ry
> > + slideshowAutoma ticImageFiles[i];
> > }
> > setTimeout('sli deshowAutomatic Forward();',
> > slideshowAutoma ticDelayBeforeS tart*1000);
> > }
> > }
> >
> > // Show next slide
> > function slideshowAutoma ticForward() {
> > if (document.image s && typeof slideshowAutoma ticSlides !=
> > 'undefined') {
> > slideshowAutoma ticCurrent++;
> > if (slideshowAutom aticCurrent >= slideshowAutoma ticSlides.lengt h)
> > slideshowAutoma ticCurrent = 0;
> > document.images .slideshowAutom atic.src =
> > slideshowAutoma ticSlides[slideshowAutoma ticCurrent].src;
> > }
> > setTimeout('sli deshowAutomatic Forward();',
> > slideshowAutoma ticDelayBetween Slides*1000);
> > }
> >
> >
> >
> >
> > ****HERE'S THE CODE I'M USING IN THE BODY OF MY HTML PAGE****
> >
> > <script language="javas cript" type="text/javascript">
> > <!--
> > var slideshowAutoma ticImageDirecto ry = '../images/';
> > var slideshowAutoma ticImageFiles = new Array('1.gif', '2.gif',
> > '3.gif');
> > var slideshowAutoma ticDelayBeforeS tart = 5;
> > var slideshowAutoma ticDelayBetween Slides = 5;
> > //-->
> > </script>
> >
> > <script language="javas cript" type="text/javascript"
> > src="slideshow_ automatic.js">
> > <!--
> > function slideshowAutoma ticInit() {}
> > //-->
> > </script>
> >
> > <img src="../images/1.gif" name="slideshow Automatic" width="20"
> > height="21">
> >
> >
> > *** How is it I go about including your code?? Thanks ever so much.
> >
> >
> > Martin Honnen <Martin.Honnen@ t-online.de> wrote in message[/color]
> news:<3F30F430. 9020506@t-online.de>...[color=green][color=darkred]
> > > Tim wrote:
> > > > Hope someone in the big wide world can help...
> > > >
> > > > What I want to do is have an image slideshow which automatically
> > > > scrolls through a series of images very fast, then pauses when you
> > > > move your mouse over the image. The images will flick through (at a
> > > > rate of about 5 per second) then pause when the user onMouseOver's.
> > > >
> > > > Any help would be gratefully received.
> > >
> > > Schedule your image change with
> > > var tid = setInterval('im age change code here', 5000)
> > > then cancel it onmouseover and restart it onmouseout
> > > <img onmouseover="cl earInterval(tid );"
> > > onmouseout="tid = setInterval('.. .', 5000);"[/color][/color][/color]

[George Ziniewicz]

Re: Image Slideshow Pause onMouseOver

"Tim" <timkeay80@msn. com> wrote in message
news:a59fa7fd.0 308110544.1ffe7 f65@posting.goo gle.com...[color=blue]
> Thanks, that's kinda solved the problem. The only thing is that I
> wanted the slideshow to return to it's original frame rate when you
> onMouseOut. The method you use requires the user to wait for the timer
> to expire. Changing the timer to allow the user 5 seconds before
> resuming original frame rate works ok for my purpose though.[/color]

Modify the onMouseOut to instead of just change the timer value, to clear
the current timeout, change the variable, and restart the timer again:

onMouseOut="cle arTimeout(timer ID);
slideshowAutoma ticDelayBetween Slides=0.2;
timerID=setTime out('slideshowA utomaticForward ();',
slideshowAutoma ticDelayBeforeS tart*1000);"

This requires you to keep the timerID handy, so capture it on all your
setTimeout calls.

zin
[color=blue]
>
>
> "George Ziniewicz" <zin1@cox.net > wrote in message[/color]
news:<9iyZa.544 89$Ne.12819@fed 1read03>...[color=blue][color=green]
> > Tim,
> >
> > To answer your question, you need to simply set a timeout variable[/color][/color]
using[color=blue][color=green]
> > mouseover/out to say 1000 or 0.2 for a large or short timer delay, and[/color][/color]
use[color=blue][color=green]
> > this variable in your setTimeout function call:
> >
> > <img src="../images/1.gif" name="slideshow Automatic" width="20"
> > height="21"
> > onMouseOver='sl ideshowAutomati cDelayBetweenSl ides=1000'
> > onMouseOut='sli deshowAutomatic DelayBetweenSli des=0.2'>
> >
> > In my code I use onClick to set or clear a 1 or 0 flag, which the[/color][/color]
timer[color=blue][color=green]
> > functions look at to know what to do.
> >
> > -------------
> >
> > You might want to check out my slide show for some ideas:
> >
> > http://zintel.com/picsel.html
> >
> > That version isn't cross-browser, it works just on IE 5. I am just
> > finishing up a rewrite that works on IE, Netscape and Mozilla that I've
> > tested, and features:
> >
> > toggle play/hold by clicking on a pic
> > draggable menu
> > forward or reverse play
> > sequential or random order
> > settable delay
> >
> > Using IE, it also includes:
> > image zoom
> > image filters (B&W, color, blends)
> > fullscreen toggle slides on a full screen black background
> > hideable popup menu
> > pausable scrolling info div section
> >
> >
> > zin
> >
> > "Tim" <timkeay80@msn. com> wrote in message
> > news:a59fa7fd.0 308070046.10ac6 3c7@posting.goo gle.com...[color=darkred]
> > > I apologize, but my knowledge of JavaScript is apparently not that
> > > good. I tried incorporating your code with the existing code I was
> > > trying to use.
> > >
> > >
> > >
> > > ****HERE'S THE CODE I'M USING IN THE JAVASCRIPT FILE****
> > >
> > > var slideshowAutoma ticSlides = new Array();
> > > var slideshowAutoma ticCurrent = 0;
> > >
> > > // Preload slideshow images
> > > function slideshowAutoma ticInit() {
> > > if (document.image s) {
> > > for (var i = 0; i < slideshowAutoma ticImageFiles.l ength; i++) {
> > > slideshowAutoma ticSlides[i] = new Image();
> > > slideshowAutoma ticSlides[i].src = slideshowAutoma ticImageDirecto ry
> > > + slideshowAutoma ticImageFiles[i];
> > > }
> > > setTimeout('sli deshowAutomatic Forward();',
> > > slideshowAutoma ticDelayBeforeS tart*1000);
> > > }
> > > }
> > >
> > > // Show next slide
> > > function slideshowAutoma ticForward() {
> > > if (document.image s && typeof slideshowAutoma ticSlides !=
> > > 'undefined') {
> > > slideshowAutoma ticCurrent++;
> > > if (slideshowAutom aticCurrent >= slideshowAutoma ticSlides.lengt h)
> > > slideshowAutoma ticCurrent = 0;
> > > document.images .slideshowAutom atic.src =
> > > slideshowAutoma ticSlides[slideshowAutoma ticCurrent].src;
> > > }
> > > setTimeout('sli deshowAutomatic Forward();',
> > > slideshowAutoma ticDelayBetween Slides*1000);
> > > }
> > >
> > >
> > >
> > >
> > > ****HERE'S THE CODE I'M USING IN THE BODY OF MY HTML PAGE****
> > >
> > > <script language="javas cript" type="text/javascript">
> > > <!--
> > > var slideshowAutoma ticImageDirecto ry = '../images/';
> > > var slideshowAutoma ticImageFiles = new Array('1.gif', '2.gif',
> > > '3.gif');
> > > var slideshowAutoma ticDelayBeforeS tart = 5;
> > > var slideshowAutoma ticDelayBetween Slides = 5;
> > > //-->
> > > </script>
> > >
> > > <script language="javas cript" type="text/javascript"
> > > src="slideshow_ automatic.js">
> > > <!--
> > > function slideshowAutoma ticInit() {}
> > > //-->
> > > </script>
> > >
> > > <img src="../images/1.gif" name="slideshow Automatic" width="20"
> > > height="21">
> > >
> > >
> > > *** How is it I go about including your code?? Thanks ever so much.
> > >
> > >
> > > Martin Honnen <Martin.Honnen@ t-online.de> wrote in message[/color]
> > news:<3F30F430. 9020506@t-online.de>...[color=darkred]
> > > > Tim wrote:
> > > > > Hope someone in the big wide world can help...
> > > > >
> > > > > What I want to do is have an image slideshow which automatically
> > > > > scrolls through a series of images very fast, then pauses when you
> > > > > move your mouse over the image. The images will flick through (at[/color][/color][/color]
a[color=blue][color=green][color=darkred]
> > > > > rate of about 5 per second) then pause when the user[/color][/color][/color]
onMouseOver's.[color=blue][color=green][color=darkred]
> > > > >
> > > > > Any help would be gratefully received.
> > > >
> > > > Schedule your image change with
> > > > var tid = setInterval('im age change code here', 5000)
> > > > then cancel it onmouseover and restart it onmouseout
> > > > <img onmouseover="cl earInterval(tid );"
> > > > onmouseout="tid = setInterval('.. .', 5000);"[/color][/color][/color]

[Tim]

Re: Image Slideshow Pause onMouseOver

>> Schedule your image change with[color=blue][color=green]
>> var tid = setInterval('im age change code here', 5000)
>> then cancel it onmouseover and restart it onmouseout
>> <img onmouseover="cl earInterval(tid );"
>> onmouseout="tid = setInterval('.. .', 5000);"[/color][/color]


How do I include your code (above) into my new code (below)? The code
below simply cycles a series of images. As before, I'd simply like it
to pause onMouseOver...

<HTML>
<HEAD>

<SCRIPT LANGUAGE="JavaS cript">

var timeDelay = 0.15; // change delay time in seconds
var Pix = new Array
("images/1.gif"
,"images/2.gif"
,"images/3.gif"
);
var howMany = Pix.length;
timeDelay *= 1000;
var PicCurrentNum = 0;
var PicCurrent = new Image();
PicCurrent.src = Pix[PicCurrentNum];
function startPix() {
setInterval("sl ideshow()", timeDelay);
}
function slideshow() {
PicCurrentNum++ ;
if (PicCurrentNum == howMany) {
PicCurrentNum = 0;
}
PicCurrent.src = Pix[PicCurrentNum];
document["ChangingPi x"].src = PicCurrent.src;
}
//-->
</script>
</HEAD>

<BODY OnLoad="startPi x()">

<img name="ChangingP ix" src="images/1.gif">

</BODY>
</HTML>