By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,968 Members | 1,563 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,968 IT Pros & Developers. It's quick & easy.

Multi-image cycling rollover?

P: n/a
I'm having a bit of trouble with this script. I'm wondering if someone might
help me. What I'm trying to do is to have a multiple image rollover whereby
onmouseover, the image's source will cycle through a few pics and stop. I
got this part to work fine--it's the onmouseout part that I'm having some
difficulties with. I would like everything to be included within one
function, instead of two (one for mouseover and one for mouseout). Here is
what I have:

----------------------------------------------------------------------------
--------------------
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function
KP_multi_img_rollover(subject,navimg1,navimg2,navi mg3,navimg4,navimg5) {
var thesubject = document.getElementById(subject);
var theimgs = new Array(navimg1,navimg2,navimg3,navimg4,navimg5);
var i = 0;
var cycle = setInterval(cycler,300);
thesubject.onmouseout = clearInterval(cycle); setInterval(backcycler,300);
function cycler() {
if (i < theimgs.length-1) {
i = i + 1;
thesubject.src = theimgs[i];
}
else {
clearInterval(cycle);
}
}
function backcycler() {
if (i > 0) {
i = i - 1;
thesubject.src = theimgs[i];
}
else {
clearInterval(backcycler);
}
}

}
</script>
</head>
<body>
<img id="item1" src="TH_basement-entrance.jpg" width="118" height="90"
onMouseOver="KP_multi_img_rollover('item1','navpic 1.jpg','navpic2.jpg','navp
ic3.jpg','navpic4.jpg','navpic5.jpg');">
</body>
</html>
----------------------------------------------------------------------------
--------------------

Now, I realize the problem is with the "thesubject.onmouseout =
clearInterval(cycle); setInterval(backcycler,300);" statement, but I can't
figure out why it isn't working. I thought you could use event handlers as
object properties? Help would be appreciated--thanks.
Jul 20 '05 #1
Share this Question
Share on Google+
2 Replies


P: n/a
"TheKeith" wrote on 13/11/2003:

<snip>
thesubject.onmouseout = clearInterval(cycle); setInterval(backcycler,300);

When specifying handlers like this, you must use the function name
only. If you include the parentheses, the function is called
immediately. This means that you can't specify parameters. Also, the
setInterval() call above will always be called: the preceeding
semi-colon marks the end of the assignment. You could put all of your
script on the same line and it wouldn't change how it was executed.
The assignment and setInterval() call are two separate statements. To
fix this, define a new nested function:

function myMouseOut()
{
window.clearInterval( cycle );
backcycle = setInterval( backcycler, 300 );
// You need the timer ID to cancel the interval later!
}

and add these to your main function:

var backcycle = null; // With the declarations
....
thesubject.onmouseout = myMouseOut;

<snip>
function backcycler() {
if (i > 0) {
i = i - 1;
thesubject.src = theimgs[i];
}
else {
clearInterval(backcycler);
This is invalid. You can't specify a function for an interval ID
(hence the new variable I introduced above).

<snip>
Now, I realize the problem is with the "thesubject.onmouseout =
clearInterval(cycle); setInterval(backcycler,300);" statement, but I can't figure out why it isn't working. I thought you could use event handlers as object properties? Help would be appreciated--thanks.


Hopefully, that will help somewhat.

Mike

--
Michael Winter
M.Winter@[no-spam]blueyonder.co.uk (remove [no-spam] to reply)
Jul 20 '05 #2

P: n/a

"Michael Winter" <M.Winter@[no-spam]blueyonder.co.uk> wrote in message
news:5Z********************@news-text.cableinet.net...
"TheKeith" wrote on 13/11/2003:

<snip>
thesubject.onmouseout = clearInterval(cycle);

setInterval(backcycler,300);

When specifying handlers like this, you must use the function name
only. If you include the parentheses, the function is called
immediately. This means that you can't specify parameters. Also, the
setInterval() call above will always be called: the preceeding
semi-colon marks the end of the assignment. You could put all of your
script on the same line and it wouldn't change how it was executed.
The assignment and setInterval() call are two separate statements. To
fix this, define a new nested function:

function myMouseOut()
{
window.clearInterval( cycle );
backcycle = setInterval( backcycler, 300 );
// You need the timer ID to cancel the interval later!
}

and add these to your main function:

var backcycle = null; // With the declarations
...
thesubject.onmouseout = myMouseOut;

<snip>
function backcycler() {
if (i > 0) {
i = i - 1;
thesubject.src = theimgs[i];
}
else {
clearInterval(backcycler);


This is invalid. You can't specify a function for an interval ID
(hence the new variable I introduced above).

<snip>
Now, I realize the problem is with the "thesubject.onmouseout =
clearInterval(cycle); setInterval(backcycler,300);" statement, but I

can't
figure out why it isn't working. I thought you could use event

handlers as
object properties? Help would be appreciated--thanks.


Hopefully, that will help somewhat.

Mike

--
Michael Winter
M.Winter@[no-spam]blueyonder.co.uk (remove [no-spam] to reply)

I'm an idiot. It works great! Thanks a lot, Mike.
Jul 20 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.