Trouble with onMouseOver and onMouseOut.

[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 <imgelement 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.

[Fred]

Daz wrote:

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

[Daz]

Fred wrote:

Daz wrote:

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

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/javasc...sref/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.