How To Use an Image As A Javascript Button?

[Rick Barr]

This may sound simple, but I'm having a tough time with it. I'm
creating a slideshow for images and using javascript for the buttons.
I've created graphical buttons, as I don't want to use the standard
gray text ones. The point I'm stuck at is getting the script to read
the correct value if the images are used. Here's my code:


var rotate_delay = 2000; // delay in milliseconds (5000 = 5 secs)
current = 0;
function next() {
if (document.slideform.slide[current+1]) {
document.images.show.src = document.slideform.slide[current+1].value;
document.slideform.slide.selectedIndex = ++current;
}
else first();
}
function previous() {
if (current-1 >= 0) {
document.images.show.src = document.slideform.slide[current-1].value;
document.slideform.slide.selectedIndex = --current;
}
else last();
}
function first() {
current = 0;
document.images.show.src = document.slideform.slide[0].value;
document.slideform.slide.selectedIndex = 0;
}
function last() {
current = document.slideform.slide.length-1;
document.images.show.src = document.slideform.slide[current].value;
document.slideform.slide.selectedIndex = current;
}





function ap(text) {
document.slideform.slidebutton.value = (text == "<IMG
SRC=../navstop.jpg>") ? "<IMG SRC=../navplay.jpg>" : "<IMG
SRC=../navstop.jpg>";
rotate();
}




function change() {
current = document.slideform.slide.selectedIndex;
document.images.show.src = document.slideform.slide[current].value;
}
function rotate() {
if (document.slideform.slidebutton.value == "<IMG
SRC=../navstop.jpg>") {
current = (current == document.slideform.slide.length-1) ? 0 :
current+1;
document.images.show.src = document.slideform.slide[current].value;
document.slideform.slide.selectedIndex = current;
window.setTimeout("rotate()", rotate_delay);
}
}
// End -->
</script>
</HEAD>


And in the body tag......


<table cellspacing=1 cellpadding=4 bgcolor="#000000">
<tr>
<td align=center bgcolor="white">
<b>July 2001</b>
</td>
</tr>
<tr>
<td align=center bgcolor="white" width=200 height=150>
<img src="katie1.jpg" name="show">
</td>
</tr>
<tr>
<td align=center bgcolor="#C0C0C0">
<select name="slide" onChange="change();">
<option value="katie1.jpg" selected>Katie
<option value="nicksmile.jpg">Nick
<option value="katie&nick.jpg">Katie & Nick
<option value="dad&katie.jpg">Dad & Katie
</select>
</td>
</tr>
<tr>
<td align=center bgcolor="#C0C0C0">
<button onClick="first();" title="Beginning"><IMG
src="../navbegin.jpg"></button>
<button onClick="previous();" title="Previous"> <IMG
src="../navback.jpg"></button>
<button name="slidebutton" onClick="ap(this.value);" title="AutoPlay">
<IMG src="../navplay.jpg"></button>
<button onClick="next();" title="Next"> <IMG
src="../navforward.jpg"></button>
<button onClick="last();" title="End"> <IMG
src="../navend.jpg"></button>
</td>
</tr>
</table>


The actual page is at
http://www.barr26.com/personal/pictures/july2001/july2001.asp. THe
problem, I believe, is with the "ap(text)" function, which I isolated
above. If you simply put text in place of the images ("Stop" and
"Start" where appropriate), it works fine. It's only when the images
are added that it breaks. I'm wondering if this is a script issue, or
possibly a stylesheet.


Thanks!

-Rick