Mostrar y Ocultar imágenes con varios botones
Publicado por ignacio (1 intervención) el 12/03/2023 14:54:27
Hola estoy aprendiendo html quisiera hacer una pagina donde tenga muchos botones para mostrar y ocultar varias imágenes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Botonera Poker</title>
<script>
function mostrar(id)
{
var objeto=document.getElementById(id)
objeto.style.display="block";
}
function ocultar(id)
{
var objeto=document.getElementById(id)
objeto.style.display="none";
}
</script>
<style>
.oculto {display:none;}
</style>
</head>
<body>
<form>
<input type="button" onclick="mostrar('imagen1') & ocultar('imagen2')" value="imagen 1">
<input type="button" onclick="mostrar('imagen2') & ocultar('imagen1')" value="imagen 2">
<img src="imagen.jpg" class="oculto" id="imagen1">
<img src="imagen2.jpg" class="oculto" id="imagen2">
</form>
</body>
</html>
el problema surge cuando tengo varios botones como hago por ejemplo si hago click imagen 1 muestra la imagen 1 y oculta imagen 2 y su viceversa haciendo click en imagen 2 estan fijos
lo que me gustaría es que tener varios botones ejemplo 10 haciendo click en boton 1 muestre imagen1 pero si el usuario quiere hacer click en el boton 10 oculte la imagen1, muestre la imagen10 vuelva hacer click en el boton ejemplo 4 oculte la imagen 10 muestre la imagen4
no se me estaría ocurriendo.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Botonera Poker</title>
<script>
function mostrar(id)
{
var objeto=document.getElementById(id)
objeto.style.display="block";
}
function ocultar(id)
{
var objeto=document.getElementById(id)
objeto.style.display="none";
}
</script>
<style>
.oculto {display:none;}
</style>
</head>
<body>
<form>
<input type="button" onclick="mostrar('imagen1') & ocultar('imagen2')" value="imagen 1">
<input type="button" onclick="mostrar('imagen2') & ocultar('imagen1')" value="imagen 2">
<img src="imagen.jpg" class="oculto" id="imagen1">
<img src="imagen2.jpg" class="oculto" id="imagen2">
</form>
</body>
</html>
el problema surge cuando tengo varios botones como hago por ejemplo si hago click imagen 1 muestra la imagen 1 y oculta imagen 2 y su viceversa haciendo click en imagen 2 estan fijos
lo que me gustaría es que tener varios botones ejemplo 10 haciendo click en boton 1 muestre imagen1 pero si el usuario quiere hacer click en el boton 10 oculte la imagen1, muestre la imagen10 vuelva hacer click en el boton ejemplo 4 oculte la imagen 10 muestre la imagen4
no se me estaría ocurriendo.
Valora esta pregunta
0
