473,320 Members | 1,914 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

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)
Jul 20 '05 #1
4 17058
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);"

Jul 20 '05 #2
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);"

Jul 20 '05 #3
"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);"

Jul 20 '05 #4
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>
Jul 20 '05 #5

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

6
by: Mr WZ Boson | last post by:
Hello, I hope you can help - I'm a bit new to PHP. My basic problem is with a page (HTML) which is intended to display an image slideshow. On this page there are a number of links to click...
9
by: Karl Burrows | last post by:
I am working on a Website for a non-profit group and for some reason I have one link that doesn't want to cooperate. All the image links work fine with the onmouseover and onmouseout script except...
2
by: George | last post by:
Hi, The code below comes directly from http://www.dynamicdrive.com. It does exactly half of what I'd like it to do. The other half is this: I'd like the image block of the changing images to...
3
by: François de Dardel | last post by:
The URL is: http://mapage.noos.fr/dardelf3/tintin/ListeAutos.html The JS is in the header This page behaves as follows: Safari (Mac) OK MSIE (Mac) OK MSIE 5.0 (PC) OK (on Virtual PC on the...
22
by: bevoldjling | last post by:
Hi ! I need some help in putting together a website for our family gathering. Although I'm still pretty "green", I don't think what I need requires terribly advanced skills ...except for one...
5
by: The87Boy | last post by:
I'm trying to make an onmouseover and onmouseout with this script: http://www.dynamicdrive.com/dynamicindex14/leftrightslide2.htm When the mouse is over, it should change to a picture, and when...
3
by: kennykenn | last post by:
im producing a banner and want the banner to rotate and fade in and out to the next image. i want to link each image to a SEPERATE site! I can get it to work with out the fading effect and can get...
3
by: kenneth6 | last post by:
with google ajax slideshow, 1. how can i custom feed all the source images: a. under a given URL folder; b. with the given filenames (e.g. file01.jpg) ?? 2. how can i enable the normal...
1
by: maarten2002 | last post by:
Hi people, I am quite new to JS-scripting and I have a question. Finally I found a "good" slideshow which works in IE, Chrome, FF with prototype. The only thing is that I would like the...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.