I have an HTML script set up right now that utilizes radio buttons to change a single image from a weighted-mean map to its unweighted counterpart. In other words, the HTML form is tied to an individual image and calls on a JavaScript function to change the image (there are two radio buttons under each image, one for the weighted-mean image and the other for the unweighted image).
Here are my JavaScript functions followed by the HTML code:
function preLoad() {
a1 = new Image; a1.src = 'NorthAmerica_Weighted.png'
a2 = new Image; a2.src = 'NorthAmerica_Unweighted.png'
b1 = new Image; b1.src = 'Europe_Weighted.png'
b2 = new Image; b2.src = 'Europe_Unweighted.png'
}
function im(image) {
document.getElementById(image[0]).src = eval(image + ".src")
}<body onLoad="preLoad()">
<center>
<tr>
<th>
<img id="a" src="NorthAmerica_Weighted.png" width="450" height="400" alt="">
<form autocomplete="off">
<input type="radio" name="5" onClick="im('a1');" checked> Weighted
<input type="radio" name="5" onClick="im('a2');"> Unweighted
</form>
<th>
<img id="b" src="Europe_Weighted.png" width="450" height="400" alt="">
<form autocomplete="off">
<input type="radio" name="5" onClick="im('b1');" checked> Weighted
<input type="radio" name="5" onClick="im('b2');"> Unweighted
</form>
</tr>
</table>
</center>
</body>I want to create a single set of radio buttons at the top of the page (rather than one below each image) that change ALL images at the same time from the weighted images to the unweighted images. So clicking on the "unweighted" radio button should switch the North America image from "NorthAmerica_Weighted.png" to "NorthAmerica_Unweighted.png" and the Europe image from "Europe_Weighted.png" to "Europe_Unweighted.png". I moved the HTML form to the top of the page, but I am unsure how to change the "img" block to get this to work.