image radio buttons image swap with Onclick - JavaScript and AJAX forum at WebmasterWorld - WebmasterWorld

Forum Moderators: open

Message Too Old, No Replies

image radio buttons image swap with Onclick

swapping images with javascript.

coder1

10:12 am on Sep 19, 2008 (gmt 0)

10+ Year Member

I have 4 four images which I use like radio buttons.Each one has 2 images, one normal and fade, when the user clicks on 1 image, i want to the image to change from fade to normal, whilst the other 3 images are faded.

I have written something by looking around the Internet. I have the following code. It however doesn't work on firefox or ie7. Please could you give me some help with this.
<html>
<head>
function doit(imgObj){

var cell = imgObj.value; // save value of clicked image
//var cell1 = imgObj.id;
//alert(cell1);
if(cell =='AED'){
document.images['AED1'].src = "images/UAE.png";
currency = 'AED';
}
if(cell =='GBP'){
document.images['GBP1'].src = "images/UK.png";
currency = 'GBP';
}
if(cell =='EUR'){
document.images['EUR1'].src = "images/EU.png";
currency = 'EUR';
}
if(cell =='USA'){
document.images['USA1'].src = "images/USA.png";
currency = 'USA';
}

if(currency !='AED'){
document.images['AED1'].src = "images/UAEfade.gif";

}

if(currency !='GBP'){
document.images['GBP1'].src = "images/UKfade.gif";

}
if(currency !='EUR'){
document.images['EUR1'].src = "images/EUfade.gif";

}
if(currency !='USA'){
document.images['USA1'].src = "images/USfade.gif";

}

}

</head>

<body>
<img src="images/UAE.png" name='img1' value="AED" id="AED1" onClick='doit(this)'> 
<img src="images/UKfade.gif" name='img1' value="GBP" id="GBP1" onClick='doit(this)'> 
<img src="images/EUfade.gif" name='img1' value="EUR" id="EUR1" onClick='doit(this)'> 
<img src="images/USfade.gif" name='img1' value="USA" id="USA1" onClick='doit(this)'>
</body>
</html>

Any help with be much appreciated.

daveVk

1:37 pm on Sep 19, 2008 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

instead of

document.images['AED1'].src = "images/UAE.png";

try using

document.getElementById('AED1').src = "images/UAE.png";

etc.

coder1

1:44 pm on Sep 19, 2008 (gmt 0)

10+ Year Member

tdaveVk that works. thank you every much.

y5cafe

7:16 pm on Sep 19, 2008 (gmt 0)

10+ Year Member

No demo :(

coder1

7:57 pm on Sep 19, 2008 (gmt 0)

10+ Year Member

y5cafe,

Well if it will help others.

here it is, just change the image source. I improved it a little, works both in firefox + IE.

function swapImage(currencyflag) {
switch (currencyflag) {
case "AED":
AED.src = "images/UAE.png";
UKP.src = "images/UKfade.gif";
EUR.src = "images/EUfade.gif";
USD.src = "images/USfade.gif";
currency = 'AED';

return(false);
case "GBP":
AED.src = "images/UAEfade.gif";
EUR.src = "images/EUfade.gif";
UKP.src = "images/UK.png";
USD.src = "images/USfade.gif";
currency = 'GBP';
return(false);

case "EUR":
AED.src = "images/UAEfade.gif";
EUR.src = "images/EU.png";
UKP.src = "images/UKfade.gif";
USD.src = "images/USfade.gif";
currency = 'EUR';
return(false);

case "USD":
AED.src = "images/UAEfade.gif";
EUR.src = "images/EUfade.gif";
UKP.src = "images/UKfade.gif";
USD.src = "images/USA.png"
currency = 'USD';
return(false);
}

}

this goes in the body, the above goes between the head tags

<IMG src="images/UAE.png" name="AED" width="30" height="22" id="AED" onclick="swapImage('AED');">
<IMG src="images/UKfade.gif" name="GBP" width="30" height="22" id="UKP" onclick="swapImage('GBP');">
<IMG src="images/EUfade.gif" name="EUR" width="30" height="22" id="EUR" onclick="swapImage('EUR');">
<IMG src="images/USfade.gif" name="USD" width="30" height="22" id="USD" onclick="swapImage('USD');">