HTML - ¿Cómo programar un botón para que me salga una imagen u otra?

¿Cómo programar un botón para que me salga una imagen u otra?

Publicado por Carlos (5 intervenciones) el 05/12/2013 17:37:00

Buenas tardes,

He creado varios botones en una página HTML con el siguiente código:

<button>BOTÓN 1</button>

<button>BOTÓN 2</button>

<button>BOTÓN 3</button>

<button>BOTÓN 4</button>

Y, debajo de ellos, me gustaría poner cuatro imágenes distintas (que la que se muestre ocupe toda la pantalla, no que se vean las cuatro a la vez) de manera que, en función de si pulso un botón u otro, me muestre una imagen u otra.
Espero haberme explicado bien...

¿Cómo podría hacerlo?

Muchas gracias por vuestra atención, un saludo ;)

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Pos: 2

Val: 1.144

¿Cómo programar un botón para que me salga una imagen u otra?

Publicado por xve (1543 intervenciones) el 06/12/2013 14:21:09

Hola Carlos, para ello, tendrias que utilizar javascript, para mostrar o esconder las imágenes... haber si te sirve este código:

<!DOCTYPE html>

<html lang="es">

<head>

    <script>

        function mostrar(id)

            var objeto=document.getElementById(id)

            if(objeto.style.display=="block")

                objeto.style.display="none";

            else

                objeto.style.display="block";

    </script>

    <style>

        .oculto {display:none;}

    </style>

</head>

<body>

<form>

    <input type="button" onclick="mostrar('contenido1')" value="Mostrar/ocultar contenido 1">

    <input type="button" onclick="mostrar('contenido2')" value="Mostrar/ocultar contenido 2">

    <img src="imagen1.png" class="oculto" id="contenido1">

    <img src="imagen2.png" class="oculto" id="contenido2">

</form>

</body>

</html>

Coméntanos, ok?

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar

¿Cómo programar un botón para que me salga una imagen u otra?

Publicado por Carlos (5 intervenciones) el 07/12/2013 19:38:02

Buenas tardes amigo,

Muchísimas gracias por tu ayuda, gracias a tu código he conseguido resolver la duda que tenía. Únicamente he realizado un par de modificaciones:

<!DOCTYPE html>

<html lang="es">

<head>

   <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('contenido1') & ocultar('contenido2')" value="Mostrar/ocultar contenido 1">

   <input type="button" onclick="mostrar('contenido2') & ocultar('contenido1')" value="Mostrar/ocultar contenido 2">

   <img src="imagen1.png" id="contenido1">

   <img src="imagen2.png" class="oculto" id="contenido2">

</form>

</body>

</html>

He creado la función ocultar para que la imagen que se esté viendo se oculte automáticamente cuando aparezca otra imagen y no aparezcan las dos juntas.
Además, he quitado el atributo "oculto" a la primera imagen para que aparezca según entro a la página.

Muchas gracias de nuevo por tu ayuda y recibe un saludo ;)

Valora esta respuesta

Comentar

Pos: 2

Val: 1.144

¿Cómo programar un botón para que me salga una imagen u otra?

Publicado por xve (1543 intervenciones) el 08/12/2013 17:48:55

Hola Carlos gracias por comentarlo, es correcto tu código, pero se te complicaría mucho si en vez de tener 2 imágenes tuvieras 10...

Mira este ejemplo, haber que te parece... utiliza una variable para saber que imagen se esta mostrando en cada momento, y así no tener que hacer varias llamadas a funciones de javascript:

<!DOCTYPE html>

<html lang="es">

<head>

    <script>

        // guardamos el id de la imagen visible

        idImagenVisible="contenido1";

        function mostrar(id)

            // esconedemos la imagen visible

            document.getElementById(idImagenVisible).style.display="none";

            // mostramos la imagen seleccionada

            document.getElementById(id).style.display="block";

            // guardamos en la variable la imagen que estamos visualizando

            idImagenVisible=id;

    </script>

    <style>

        .oculto {display:none;}

    </style>

</head>

<body>

<form>

    <input type="button" onclick="mostrar('contenido1')" value="Mostrar/ocultar contenido 1">

    <input type="button" onclick="mostrar('contenido2')" value="Mostrar/ocultar contenido 2">

    <input type="button" onclick="mostrar('contenido3')" value="Mostrar/ocultar contenido 3">

</form>

<img src="imagen1.png" id="contenido1">

<img src="imagen2.png" class="oculto" id="contenido2">

<img src="imagen3.png" class="oculto" id="contenido3">

</body>

</html>

Coméntanos, ok?

Valora esta respuesta

Comentar

¿Cómo programar un botón para que me salga una imagen u otra?

Publicado por Carlos (5 intervenciones) el 08/12/2013 19:11:25

Muchas gracias de nuevo, amigo.
La verdad, el código lo quería para mostrar hasta 4 imágenes y, con las modificaciones que hice de tu código inicial, me funciona perfectamente.
No obstante, me guardo este nuevo código por si en algún momento lo necesito.

Un saludo y gracias por tu ayuda ;)

Valora esta respuesta

Comentar

¿Cómo programar un botón para que me salga una imagen u otra?

Publicado por Francisco Manuel (3 intervenciones) el 29/05/2014 19:09:15

gracias amigos por todos los aportes, tengo la duda de como poder añadirle un scrip en vez de una imagen y la imagen con url de enlace.

espero vuestra ayuda

Valora esta respuesta

Comentar

¿Cómo programar un botón para que me salga una imagen u otra?

Publicado por pedro (1 intervención) el 16/09/2014 16:25:16

muchas gracias

Valora esta respuesta

Comentar

¿Cómo programar un botón para que me salga una imagen u otra?

Publicado por milton (1 intervención) el 14/01/2015 19:43:25

Gracias me sirvio tu codigo

Valora esta respuesta

Comentar

¿Cómo programar un botón para que me salga una imagen u otra?

Publicado por Robbie (1 intervención) el 17/03/2016 02:52:46

Hola!!!

Muchas gracias por toda la info.

Necesitaría saber esto mismo, pero al apretar el botón, aparecieran varias imágenes que tengo ocultas en diferentes área de la página, en vez de una.

He conseguido esto mismo, pues al apretar una imagen se muestra o se oculta otra imagenoculta en diferente área de la página, pero no consigo que se muestren, por ejemplo, tres imagenes ocultas en diferentes áreas entre si de la página.

Solo se me ha atsscado esto.

Muchas gracias.

Espero vuestra respuesta.

Saludos!!!

Valora esta respuesta

Comentar

Que formas hay para recibir datos de formularios

Duda Select