Tengo una secuencia de comandos HTML configurada en este momento que utiliza botones de radio para cambiar una sola imagen de un mapa de media ponderada a su contraparte no ponderada. En otras palabras, el formulario HTML está vinculado a una imagen individual y llama a una función de JavaScript para cambiar la imagen (hay dos botones de opción debajo de cada imagen, uno para la imagen de media ponderada y otro para la imagen no ponderada).
Aquí están mis funciones de JavaScript seguidas del código HTML:
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>Quiero crear un solo conjunto de botones de radio en la parte superior de la página (en lugar de uno debajo de cada imagen) que cambien TODAS las imágenes al mismo tiempo de las imágenes ponderadas a las imágenes no ponderadas. Por lo tanto, hacer clic en el botón de opción "no ponderado" debería cambiar la imagen de América del Norte de "NorthAmerica_Weighted.png" a "NorthAmerica_Unweighted.png" y la imagen de Europa de "Europe_Weighted.png" a "Europe_Unweighted.png". Moví el formulario HTML a la parte superior de la página, pero no estoy seguro de cómo cambiar el bloque "img" para que funcione.