coder1 Posted September 19, 2008 Share Posted September 19, 2008 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. Link to comment https://forums.phpfreaks.com/topic/124927-using-images-as-radio-buttons-swapping-images-with-onclick/ Share on other sites More sharing options...
Psycho Posted September 19, 2008 Share Posted September 19, 2008 1. Well, it typically helps if you put your JavaScript code within SCRIPT tags! 2. Your image names are not consistent (e.g. 'US' vs. 'USA'). 3. You are using document.images but trying to reference the id of the images instead of their names. 4. Make your image names and the values of the image tags consistent 5. make your life easier and make the images all the same type Using the code below you can add as many "options" as you want to the list and you do not need to edit the JavaScript code - just make sure the images match the value of the option. (Note I used jpg for the images as I was testing). <html> <head> <script type="text/javascript"> function checkOption(optionValue){ var cntryList = document.getElementById('countryOptions').childNodes; for (i=0; i<cntryList.length; i++) { if (cntryList[i].value) { countryID = cntryList[i].value; imgSrc = (optionValue==countryID)?'images/'+countryID+'.jpg':'images/'+countryID+'fade.jpg'; cntryList[i].src = imgSrc; } } } </script> </head> <body> <div id="countryOptions"> <img src="images/AED.jpg" name='img1' value="AED" onClick='checkOption(this.value)'> <img src="images/GBPfade.jpg" name='img1' value="GBP" onClick='checkOption(this.value)'> <img src="images/EURfade.jpg" name='img1' value="EUR" onClick='checkOption(this.value)'> <img src="images/USAfade.jpg" name='img1' value="USA" onClick='checkOption(this.value)'> </div> </body> </html> Link to comment https://forums.phpfreaks.com/topic/124927-using-images-as-radio-buttons-swapping-images-with-onclick/#findComment-645941 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.