Image replacement for slideshow control

Hi,

I have a js slideshow and need the 'play' button image to toggle back and forth from 'play' to a 'stop' image. I found a second js script that toggled the image but when applied the slideshow will no longer work in IE, only FF. I believe the issue is to do with an id name conflict.

If anyone can either find a work around with my current two scripts or suggest a way to add to the slideshow script so that it can handle both it would be very much appreciated.

</script>

This is the image toggle script:

<script type = 'text/javascript'>
function changePic(el, pic1, pic2) {
var pic=((el.src.match(pic1)!=null)? pic2 : pic1);
el.src="images/"+pic+".gif";
}
window.onload=function() {
var pic=document.getElementById('toggle');
pic.onclick=function(){changePic(this,'play','next');}
}
</script>

Code (markup):

Part of slideshow code I believe is conflicting:

<script language="javascript">

document.write('<img name="imgslide" id="imgslide" src="'+theimage[0][0]+'" border="0">')

</script>

Code (markup):

HTML


<div style="margin-top:5px""><a href="#" onFocus="this.blur()"onclick="SetSlide(i-1);"><img src="images/prev.gif" width="19" height="18"></a>


<a href="#" onFocus="this.blur()"onclick="PlaySlide();"><img id="toggle" src="images/next.gif" width="23" height="18"></a>



<a href="#" onFocus="this.blur()"onclick="SetSlide(i+1);"><img src="images/next.gif" width="19" height="18"></a></div>


I have a feeling the document.write with includes and id="imgslide" (the slideshow script) is interfering with:

var pic=document.getElementById('toggle');

of the toggle script.

 

How about replacing this part of the changePic script...

var pic=document.getElementById('toggle');

Code (markup):

... to...

var pic=document.getElementById('imgslide');

Code (markup):

Let us know if that works.