# Solved: Swap Button Image JavaScript



## marques_uk (Jun 22, 2009)

Hello,

I have an image button on my web page that I'd like to change everytime it's clicked. At the moment when you click on this image button it calls several functions but the image on the button stays the same.

So I have an image called 'select.png' and another that I'd like to display when the button has been clicked called 'unselect.png' in its place.

Does anyone know of any code that I can do this? I've looked around the web and havent been able to find any code that works the way I want it to.

Just in case you need to know, the form name is 'selections' and has the button has the id 'main_select'. The image button code can be seen below.

Thanks in advance


----------



## aasmith26 (Nov 28, 2008)

So, if i'm correct, you want this to be like a toggle button. Sort of like how a checkbox works, only with an image?


----------



## marques_uk (Jun 22, 2009)

yes thats exactly what I need. 

So image button 'select.png' once clicked changes to 'unselect.png'. image button.

Thank you...


----------



## aasmith26 (Nov 28, 2008)

Did you want to be able to click the unselect button and swap it back to 'select.png'? (duh). Can you give more details as to what the function is that you are trying to accomplish?


----------



## marques_uk (Jun 22, 2009)

Basically I have a web page that contains a form called 'selections', (not live) inside the form I have two sections containing several checkboxes, one section the checkboxes are called 'check_countrys' the other checkboxes are called 'check_languages'. They both have individual 'select all' buttons that change on click and call separate functions. This is the Checkcountry function. 

function Checkcountry (chk)
{
var state = 0;
for (var i = 0; i < chk.length; ++i)
{
switch (chk[ i ].checked)
{
case true:
chk[ i ].checked = false;
state = 1;
break;

case false:
default:
chk[ i ].checked = true;
state = 0;
break;
}
}

if (state)
{
document.getElementById("check_country_btn").src = "select_country.png";
}
else
{
document.getElementById("check_country_btn").src = "unselect_country.png";
}
}

This is the button


I want a main Select All button that will select all checkboxes for the check_countrys checkboxes and the check_languages checkboxes. 

This is the button code that calls both the functions and works fine, I would just like it to change image every click, like the above.



I hope this is clear enough for you to help. 
Many thanks


----------

