onClick Image Swop problem 1

[starfishh]

Hi All,

I think this is probably a pretty simple one but I am new to Javascript.

All I want to do is have a Form button cause an image swop. This is easy. How do I make the button then change the image back next time it is pressed?

The idea is the user clicks the button and the image and the 'value' of the button change.When the user clicks again they return to the original image and 'value'.

I've been messing around with else if constructs with little success.

Can anybody help me please?

starfishh

 

[GIGN]

See if you can employ these ideas:

variable toggle switch:

var btn_On = true;
var btn_On = (btn_On)? false:true;

This works by taking what is in the brackets - if it is true
then returns false - if false returns true - so if btn_On is true - it gets switched to false.

Also in your image tag you can add a varible if you like:

<img src=&quot;imagename&quot; OLDSRC=&quot;imagename&quot;>

Then in your function which changes the image back, al you need to do is set the src to OLDSRC. This is a simplification really, since eventually you will want to set up image preloading - but this gives you an idea. This is good if you have more than one image that can change.

Now when the button is clicked - you want to use the toggle to set some variable - then in your swap function you have two branches, corresponding to the states of this variable, something like:

<script>
var changeMeBackPlease = false;

function imageSwap(image){
// change image back
if(changeMeBackPlease){

image.src = OLDSRC;

}
//change image
else if(!changeMeBackPlease){

image.src = &quot;newImage.jpg&quot;;
}

// reset the variable depending what it is now
// Just swaps or inverts the true/false value

changeMeBackPlease =(changeMeBackPlease)?false:true;
}
<script>


I hope this is handy ;-)
b² - benbiddington@surf4nix.com