I've created a simple 3 image web header that rotates through each image in 5 second intervals. While that part works fine I'd like to ba able to make it interactive. By that I mean I want to add or overlay squares (buttons) that allow the user to go back and forth between header slides.

As it is now I can display the slides but connot get the interactive part to work.

I'm using the following script I found online:

Code:
<script language="JavaScript1.1">

var slideimages=new Array()
var slidelinks=new Array()

function slideshowimages(){
  for (i=0;i<slideshowimages.arguments.length;i++){
  slideimages[i]=new Image()
  slideimages[i].src=slideshowimages.arguments[i]
  }
}

function slideshowlinks(){
  for (i=0;i<slideshowlinks.arguments.length;i++)
  slidelinks[i]=slideshowlinks.arguments[i]
}

function gotoshow(){
  if (!window.winslide||winslide.closed)
    winslide=window.open(slidelinks[whichlink])
  else
    winslide.location=slidelinks[whichlink]
    winslide.focus()
}

</script>
and in the body I have:

HTML Code:
<div align="center">
<a href="javascript:gotoshow()"><img src="img1.jpg" name="slide" border=0 usemap="#slideMap"></a>
<script>
<!--
//configure the paths of the images, plus corresponding target links
slideshowimages("img1.jpg", "img2.jpg", "img3.jpg")
slideshowlinks("http://www.intecvideo.com", "cvproducts.html", "http://java-scripts.net")

//configure the speed of the slideshow, in miliseconds
var slideshowspeed=5000
var whichlink=0
var whichimage=0

function slideit(){
  if (!document.images)
    return
    document.images.slide.src=slideimages[whichimage].src
    whichlink=whichimage

  if (whichimage<slideimages.length-1)
    whichimage++
  else
    whichimage=0
    setTimeout("slideit()",slideshowspeed)
}
slideit()
//-->
</script>
</div>
As I said the script allows for the images to be displayed as I want but does not allow for and interaction.

Any help woulf be appriciated.