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()\" /> "
);
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.
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()\" /> "
);
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.