A Button that changes images

[siamstat]

Hi guys! I have a major problem with the scripts that i found on this webpage. http://www.sislands.com/coin70/week3/onclick.htm  This example is good. It points out what i would like to make but ... slightly different the "Change the image source" button . I played with it and tried to make it an image so it will look better but failed. I also tried to make it support more than 2 pictures but failed again ! If anyone could please clear a few things for me. When i added the <img src="image.png" to the Button "Change the image source" it acquired a border now since it is a "link" i wish it would be white on it's margins since the picture that i intend to use is white on all it's borders . And last but not least, How can i add more than just 2 pictures in the script . Thanks in advance !!! Below i added the script from the link that i provided above. Cheers !

 

<SCRIPT>

 

var imageURL = "images/clock.jpg";

 

if (document.images) {

    var clock = new Image();

    clock.src = "images/clock.jpg";

 

    var cup = new Image();

    cup.src = "images/cup.gif";

}

 

function changeImage() {

    if (document.images) {

          if (imageURL == "images/cup.jpg") imageURL = "images/clock.jpg";

          else imageURL = "images/cup.jpg";

 

        document.myImage.src = imageURL;

    }

}

 

</SCRIPT>

 

<FORM>

    <INPUT TYPE="Button" VALUE="Change the image source" onClick="changeImage();">

</FORM>

 

<IMG SRC="clock.jpg" NAME="myImage">

[denno020]

<img src="image.png" border="0"

 

That will remove the border altogether.

 

<SCRIPT>

var imageURL = "images/clock.jpg";

if (document.images) {
     var clock = new Image();
     clock.src = "images/clock.jpg";

     var cup = new Image();
     cup.src = "images/cup.gif";

 var car = new Image();
 car.src = "images/car.gif";

 var ball = new Image();
 ball.src = "images/ball.gif"
}

function changeImage() {
if (document.images) {
	if(imageURL == "images/cup.jpg") imageURL = "images/clock.jpg";
	else if(imageURL = "images/clock.jpg") imageURL = "images/car.gif;
	else if(imageURL = "images/car.gif") imageURL = "images/ball.gif;
	else imageURL = "images/cup.gif";

	document.myImage.src = imageURL;
     }
}

</SCRIPT>

<FORM>
     <INPUT TYPE="Button" VALUE="Change the image source" onClick="changeImage();">
</FORM>

<IMG SRC="clock.jpg" NAME="myImage">

 

That is how you add more pictures. I've added 'car' and 'ball'.

 

Denno

[siamstat]

Thanks for the adding more pictures code

 

<FORM>

    <image="reset.png" border="0" VALUE=""  onClick="changeImage();">

</FORM>

 

I tried to change the button "Change the image source" in to an image but i just can't, after playing with it and got the code given up , the button is removed and when you press on the pictures they auto change. I still need that button though .  Hope someone can help me and thanks for the reply Denno

[siamstat]

<input type="image" src="reset.PNG" border="0" value="Submit" width="25" height="41" onClick="changeImage();">

 

with this code i managed to make the button an image but when i press it i see the image changing for just 1 second and then it autochanges back to the default image that is displayed meaning

<IMG SRC="clock.jpg" NAME="myImage">

 

Cheers!