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]

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 slideshowAutomaticSlides = new Array();
var slideshowAutomaticCurrent = 0;

// Preload slideshow images
function slideshowAutomaticInit() {
if (document.images) {
for (var i = 0; i < slideshowAutomaticImageFiles.length; i++) {
slideshowAutomaticSlides[i] = new Image();
slideshowAutomaticSlides[i].src = slideshowAutomaticImageDirectory
+ slideshowAutomaticImageFiles[i];
}
setTimeout('slideshowAutomaticForward();',
slideshowAutomaticDelayBeforeStart*1000);
}
}

// Show next slide
function slideshowAutomaticForward() {
if (document.images && typeof slideshowAutomaticSlides !=
'undefined') {
slideshowAutomaticCurrent++;
if (slideshowAutomaticCurrent >= slideshowAutomaticSlides.length)
slideshowAutomaticCurrent = 0;
document.images.slideshowAutomatic.src =
slideshowAutomaticSlides[slideshowAutomaticCurrent].src;
}
setTimeout('slideshowAutomaticForward();',
slideshowAutomaticDelayBetweenSlides*1000);
}


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

<script language="javascript" type="text/javascript">
<!--
var slideshowAutomaticImageDirectory = '../images/';
var slideshowAutomaticImageFiles = new Array('1.gif', '2.gif',
'3.gif');
var slideshowAutomaticDelayBeforeStart = 5;
var slideshowAutomaticDelayBetweenSlides = 5;
//-->
</script>

<script language="javascript" type="text/javascript"
src="slideshow_automatic.js">
<!--
function slideshowAutomaticInit() {}
//-->
</script>

<img src="../images/1.gif" name="slideshowAutomatic" width="20"
height="21">
*** How is it I go about including your code?? Thanks ever so much.
Martin Honnen <Ma***********@t-online.de> wrote in message news:<3F**************@t-online.de>...

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('image change code here', 5000)
then cancel it onmouseover and restart it onmouseout
<img onmouseover="clearInterval(tid);"
onmouseout="tid = setInterval('...', 5000);"

[Tim]

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" <zi**@cox.net> wrote in message news:<9iyZa.54489$Ne.12819@fed1read03>...

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="slideshowAutomatic" width="20"
height="21"
onMouseOver='slideshowAutomaticDelayBetweenSlides= 1000'
onMouseOut='slideshowAutomaticDelayBetweenSlides=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" <ti*******@msn.com> wrote in message
news:a5**************************@posting.google.c om...

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 slideshowAutomaticSlides = new Array();
var slideshowAutomaticCurrent = 0;

// Preload slideshow images
function slideshowAutomaticInit() {
if (document.images) {
for (var i = 0; i < slideshowAutomaticImageFiles.length; i++) {
slideshowAutomaticSlides[i] = new Image();
slideshowAutomaticSlides[i].src = slideshowAutomaticImageDirectory
+ slideshowAutomaticImageFiles[i];
}
setTimeout('slideshowAutomaticForward();',
slideshowAutomaticDelayBeforeStart*1000);
}
}

// Show next slide
function slideshowAutomaticForward() {
if (document.images && typeof slideshowAutomaticSlides !=
'undefined') {
slideshowAutomaticCurrent++;
if (slideshowAutomaticCurrent >= slideshowAutomaticSlides.length)
slideshowAutomaticCurrent = 0;
document.images.slideshowAutomatic.src =
slideshowAutomaticSlides[slideshowAutomaticCurrent].src;
}
setTimeout('slideshowAutomaticForward();',
slideshowAutomaticDelayBetweenSlides*1000);
}


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

<script language="javascript" type="text/javascript">
<!--
var slideshowAutomaticImageDirectory = '../images/';
var slideshowAutomaticImageFiles = new Array('1.gif', '2.gif',
'3.gif');
var slideshowAutomaticDelayBeforeStart = 5;
var slideshowAutomaticDelayBetweenSlides = 5;
//-->
</script>

<script language="javascript" type="text/javascript"
src="slideshow_automatic.js">
<!--
function slideshowAutomaticInit() {}
//-->
</script>

<img src="../images/1.gif" name="slideshowAutomatic" width="20"
height="21">
*** How is it I go about including your code?? Thanks ever so much.
Martin Honnen <Ma***********@t-online.de> wrote in message

news:<3F**************@t-online.de>...

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('image change code here', 5000)
then cancel it onmouseover and restart it onmouseout
<img onmouseover="clearInterval(tid);"
onmouseout="tid = setInterval('...', 5000);"

[George Ziniewicz]

"Tim" <ti*******@msn.com> wrote in message
news:a5**************************@posting.google.c om...

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.
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="clearTimeout(timerID);
slideshowAutomaticDelayBetweenSlides=0.2;
timerID=setTimeout('slideshowAutomaticForward();',
slideshowAutomaticDelayBeforeStart*1000);"

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

zin


"George Ziniewicz" <zi**@cox.net> wrote in message

news:<9iyZa.54489$Ne.12819@fed1read03>...

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="slideshowAutomatic" width="20"
height="21"
onMouseOver='slideshowAutomaticDelayBetweenSlides= 1000'
onMouseOut='slideshowAutomaticDelayBetweenSlides=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" <ti*******@msn.com> wrote in message
news:a5**************************@posting.google.c om...

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 slideshowAutomaticSlides = new Array();
var slideshowAutomaticCurrent = 0;

// Preload slideshow images
function slideshowAutomaticInit() {
if (document.images) {
for (var i = 0; i < slideshowAutomaticImageFiles.length; i++) {
slideshowAutomaticSlides[i] = new Image();
slideshowAutomaticSlides[i].src = slideshowAutomaticImageDirectory
+ slideshowAutomaticImageFiles[i];
}
setTimeout('slideshowAutomaticForward();',
slideshowAutomaticDelayBeforeStart*1000);
}
}

// Show next slide
function slideshowAutomaticForward() {
if (document.images && typeof slideshowAutomaticSlides !=
'undefined') {
slideshowAutomaticCurrent++;
if (slideshowAutomaticCurrent >= slideshowAutomaticSlides.length)
slideshowAutomaticCurrent = 0;
document.images.slideshowAutomatic.src =
slideshowAutomaticSlides[slideshowAutomaticCurrent].src;
}
setTimeout('slideshowAutomaticForward();',
slideshowAutomaticDelayBetweenSlides*1000);
}


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

<script language="javascript" type="text/javascript">
<!--
var slideshowAutomaticImageDirectory = '../images/';
var slideshowAutomaticImageFiles = new Array('1.gif', '2.gif',
'3.gif');
var slideshowAutomaticDelayBeforeStart = 5;
var slideshowAutomaticDelayBetweenSlides = 5;
//-->
</script>

<script language="javascript" type="text/javascript"
src="slideshow_automatic.js">
<!--
function slideshowAutomaticInit() {}
//-->
</script>

<img src="../images/1.gif" name="slideshowAutomatic" width="20"
height="21">
*** How is it I go about including your code?? Thanks ever so much.
Martin Honnen <Ma***********@t-online.de> wrote in message

news:<3F**************@t-online.de>...

> 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('image change code here', 5000)
> then cancel it onmouseover and restart it onmouseout
> <img onmouseover="clearInterval(tid);"
> onmouseout="tid = setInterval('...', 5000);"

[Tim]

>> Schedule your image change with

var tid = setInterval('image change code here', 5000)
then cancel it onmouseover and restart it onmouseout
<img onmouseover="clearInterval(tid);"
onmouseout="tid = setInterval('...', 5000);"

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="JavaScript">

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("slideshow()", timeDelay);
}
function slideshow() {
PicCurrentNum++;
if (PicCurrentNum == howMany) {
PicCurrentNum = 0;
}
PicCurrent.src = Pix[PicCurrentNum];
document["ChangingPix"].src = PicCurrent.src;
}
//-->
</script>
</HEAD>

<BODY OnLoad="startPix()">

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

</BODY>
</HTML>