Hi! I have an image of a radio button on my page (there are reasons why I'm not using a real one). I want to make the image change from one image (radio_button.gif) to another (radio_button_selected.gif) and vice-vera. I'm trying to create logic that will toggle the variable and change the image out. My code isn't very good, and it's not working, so anyadvice would be helpful. Thanks!

<html>
<head>
<script type="text/javascript">
var radio = "on";
    
		function change(elem)
    {
        if var radio=="on";{
				
			var radio=="off";
			document.img3.src='images/radio_button.gif';	
			}
			
		 else {
			 document.img3.src='images/radio_button_select.gif';
			 }		
</script>
</head>
<body>
<a onclick="change(this);"> <img name="img3" CLASS="draggable" src="images/radio_button.gif"> </a>
</body>
</html>

Here's my advice :) (Full working code)

<html>
<head>
<script type="text/javascript">
var radio = "off";

function change() {
    if (radio == "on") {
        radio = "off";
        document.img3.src='images/radio_button.gif';
    }
    else {
        radio = "on";
        document.img3.src='images/radio_button_select.gif';
    }
}

</script>
</head>
<body>
<a onclick="change();"> <img name="img3" CLASS="draggable" src="images/radio_button.gif" /> </a>
</body>
</html>

Wonderful! Thanks! It works great.

Toggling the variable flip:

flip = (flip != true);
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.