Trouble with onMouseOver and onMouseOut.

D

Daz

Hi everyone.

I think my problem is a simple one, but I am completely baffled as to
how to pull it off.

I have a piece of code like so...
document.write(
"<img id=\"slideshow_toggle\" src=\"img/stop_slideshow.png\" "
+ "onMouseOver=\"src='./img/stop_slideshow_hover.png'\" "
+ "onMouseOut=\"src='./img/stop_slideshow.png'\" "
+ "onClick=\"slideshow_button()\" />&nbsp;"
);

I have a function that is meant to change the button. It should be
changed to a different image of the same button onMouseOver, then
changed back onMouseOut. onClick, the button should change completely,
but still have the onMouseOver and onMouseOut properties, only using
slightly different images.

Here is the function...

function slideshow_button() {
var slideshow_toggle = d.getElementById("slideshow_toggle");
if (slideshow_toggle.src.match(/stop/)) {
slideshow_toggle.src = './img/start_slideshow.png'
slideshow_toggle.onMouseOver =
"src='./img/start_slideshow_hover.png'"
slideshow_toggle.onMouseOut = "src='./img/start_slideshow.png'"
}
else {
slideshow_toggle.src = './img/stop_slideshow.png'
slideshow_toggle.onMouseOver =
"src='./img/stop_slideshow_hover.png'"
slideshow_toggle.onMouseOut = "src='./img/stop_slideshow.png'"
}
}

Everything the picture changes when I click the button, but for some
reason, the wrong onMouseOut event kicks in, and when I move my mouse
from the image, it changes back to the wrong image. I am sure there is
a simple solution, but I just can't seem to find it. I have tried
removing the onMouse events from the <img> element itself, and I have
tried using them but leaving the args blank (ie. onMouseOver="" and
onMouseOut=""). Just as I suspected, it didn't work, but it was worth a
try. If anyone can shed any light on the subject, I would very much
appreciate it. Remember. in all, there are 4 images, (2 sets of 2). The
onMouse events switch from on to the other in the appropriate set of 2,
and the onClick should switch to the other set of 2 images.

Many thanks.

Daz.
 
F

Fred

Daz said:
Hi everyone.

I think my problem is a simple one, but I am completely baffled as to
how to pull it off.

I have a piece of code like so...
document.write(
"<img id=\"slideshow_toggle\" src=\"img/stop_slideshow.png\" "
+ "onMouseOver=\"src='./img/stop_slideshow_hover.png'\" "
+ "onMouseOut=\"src='./img/stop_slideshow.png'\" "
+ "onClick=\"slideshow_button()\" />&nbsp;"
);

I don't understand why you are using document.write. Even if there's a
point (and there are valid reasons for doing it) you should just post
the HTML it generates, unless you're having problems with the
document.write() itself.

The use of " />" as a closing tag indicates that you think you are
using XHTML. In that case, not only must your attribute names must be
all lower case but document.write() should not work at all. If you
aren't using XHTML, stick to valid HTML 4.01 strict.

I have a function that is meant to change the button. It should be
changed to a different image of the same button onMouseOver, then
changed back onMouseOut. onClick, the button should change completely,
but still have the onMouseOver and onMouseOut properties, only using
slightly different images.

Here is the function...

How about something like:

<img src="button_stop_out.jpg"
onmouseover="toggleImage(this, event);"
onmouseout="toggleImage(this, event);"
onclick="toggleImage(this, event);"
And the function:

function toggleImage (el, e) {
var eType = e.type;
if (/mouseover/.test(eType)) {
el.src = el.src.replace(/_out/,'_over');
} else if (/mouseout/.test(eType)) {
el.src = el.src.replace(/_over/,'_out');
} else if (/click/.test(eType)) {
el.src = el.src.replace(/_start/,'_stop');
}
}

and name the images:

blah_start_out.jpg
blah_start_over.jpg
blah_stop_out.jpg
blah_stop_over.jpg


__
Fred
 
D

Daz

Fred said:
I don't understand why you are using document.write. Even if there's a
point (and there are valid reasons for doing it) you should just post
the HTML it generates, unless you're having problems with the
document.write() itself.

The use of " />" as a closing tag indicates that you think you are
using XHTML. In that case, not only must your attribute names must be
all lower case but document.write() should not work at all. If you
aren't using XHTML, stick to valid HTML 4.01 strict.



How about something like:

<img src="button_stop_out.jpg"
onmouseover="toggleImage(this, event);"
onmouseout="toggleImage(this, event);"
onclick="toggleImage(this, event);"

And the function:

function toggleImage (el, e) {
var eType = e.type;
if (/mouseover/.test(eType)) {
el.src = el.src.replace(/_out/,'_over');
} else if (/mouseout/.test(eType)) {
el.src = el.src.replace(/_over/,'_out');
} else if (/click/.test(eType)) {
el.src = el.src.replace(/_start/,'_stop');
}
}

and name the images:

blah_start_out.jpg
blah_start_over.jpg
blah_stop_out.jpg
blah_stop_over.jpg


__
Fred

Superb! Thank you very much. I am just getting to grips with JavaScript
and it seems to be really hard to find a decent breakdown of what
functions and subfunctions are available. Since then I have found
http://research.nihonsoft.org/javascript/jsref/index.htm which seems to
be a little Netscape orientated, but nonetheless, exceptionally good
and seems to cover just about everything.

Thanks again for your help.

Daz.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top