tengo 2 imagenes Si la persona selecciona uno y hace clic en "SIGUIENTE", se redirige a una página. Si la persona hace lo mismo con la otra imagen, se supone que debe redirigir a otra página.
Aquí está el código que tengo:
function getval() { if (self.value == "1") { window.location.href = "universal-result.html"; } else if (self.value == "2") { window.location.href = "disney-result.html" } } <body class="choosepark-body"> <p class="text-choosepark">Você quer ingresso para qual complexo?</p> <input type="image" src="/Archives/Universal Botao.png" onmouseover="this.src='/Archives/Disney Universal Rosa.png'" onmouseout="this.src='Archives/Universal Botao.png'" class="universal-button" value="1"> <input type="image" src="/Archives/Disney Botao.png" onmouseover="this.src='/Archives/Disney Botao Rosa.png'" onmouseout="this.src='/Archives/Disney Botao.png'" class="disney-button" value="2"> <button onclick="getval()" class="next-button"> NEXT</button> </body> ¿Cómo hago para que la imagen se "seleccione" cuando la persona hace clic en ella y cuando hace clic en "SIGUIENTE", se redirige a la página relacionada con esa imagen? Además, si es posible, cuando la persona pasa el onmouseover por encima, cambia el ícono, pero también quería que el ícono cambiara cuando se hace clic en la imagen (seleccionada).
No puedes hacerlo directamente por "imagen seleccionada". Porque, hasta donde yo sé, no hay un detector de eventos para eso en el DOM.
Yo lo intentaría así:
HTML:
<input type="image" src="./image/opt-one.png" id="opt-one" /> <input type="image" src="./image/opt-two.png" id="opt-two" /> <button id="next-btn">NEXT</button>JavaScript:
// get HTML elements by ids const button = document.getElementById("next-btn"); const imgOne = document.getElementById("opt-one"); const imgTwo = document.getElementById("opt-two"); // setup variable to store choice and object with urls let choice = ""; const option = { optOne: "http://option-one.com", optTwo: "http://option-two.com", }; // select the images and set choice imgOne.addEventListener("click", () => (choice = option.optOne)); imgTwo.addEventListener("click", () => (choice = option.optTwo)); // load next page on button click button.addEventListener("click", () => (window.location.href = choice));Así, podría agregar más imágenes y URL fácilmente a la aplicación.