Mostrar imagen al hacer clic sin cambiar de página.
Resueltosebiou1 Mensajes publicados 22 Estado Miembro -
Hola,
Estoy comenzando con HTML y CSS y necesitaría un poco de ayuda.
¿Podrías ayudarme a mostrar diferentes imágenes en la misma página al hacer clic en enlaces?
En resumen, estoy haciendo un pequeño sitio que permanecerá en local y no en internet, y me gustaría poder mostrar una imagen diferente cada vez que haga clic en un enlace. Cada enlace siempre deberá mostrar la misma imagen y siempre en el mismo lugar de la página.
También me gustaría quedarme en la misma página, sin abrir otra o ir a otra página.
Quiero tener el menú (con los enlaces) a la derecha (eso ya lo tengo) pero no sé cómo hacer para que la imagen aparezca a la derecha justo después de hacer clic.
Gracias de antemano por tu ayuda.
Cordialmente,
7 respuestas
-
Hola,
Para utilizar enlaces que apunten dentro de la página, se utilizan anclas. Se le da un nombre/etiqueta a una posición en el código fuente HTML, luego en un enlace, se completa la URL con #etiqueta para apuntar a la etiqueta indicada.
Ver: https://www.alsacreations.com/astuce/lire/5-lien-precis-page-ancre-anchor-diese.html
-
Hola,
Muchas gracias por su respuesta.
Sin embargo, no me expliqué bien.
Me gustaría que los enlaces mostraran la imagen (que no se muestra al llegar a la página).
¿Es posible?
Gracias de antemano,
Atentamente,
-
No debo explicarme como es debido.
En resumen, he creado enlaces. Y me gustaría que, cuando haga clic en ellos, se muestre una imagen a la derecha de la página.
Es un sitio que quiero conservar en local y no en línea, así que las imágenes están en la carpeta de imágenes de mi sitio.
Las imágenes (planos de edificios) no se muestran hasta que no haga clic en el enlace.
Cuando llego a la página de "planos", por ejemplo, quiero hacer clic en el planta baja (por ejemplo) y me gustaría que el plano de la planta baja se mostrara a la derecha. Lo mismo para los otros pisos.
Como dicen, quizás no sea posible en HTML, lamentablemente, soy principiante (comencé hace 3 días) y aún no conozco JavaScript.
Si mis explicaciones anteriores le han ayudado y tiene una solución, la aceptaré; de lo contrario, muchas gracias por su ayuda. Veré si puedo hacerlo de otra manera.
Atentamente,
-
En html, se necesitaría una página con todas las imágenes y un ancla delante de cada una para posicionar la página en la imagen correcta.
Después, ya no es html, podemos hacer:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<script type="text/javascript">
function cambiarimagen(imgid,nom) {
var img = document.getElementById(imgid);
img.src = nom;
}
</script>
<title>Prueba</title>
</head>
<body>
<p>
<button id="button" onclick="cambiarimagen('marco','imagen1.png')">imagen 1</button>
<button id="button" onclick="cambiarimagen('marco','imagen2.png')">imagen 2</button>
<button id="button" onclick="cambiarimagen('marco','imagen3.png')">imagen 3</button>
<img id="marco" src = "imagen0.png" alt="Mi imagen" />
</p>
</body>
</html>
-
-
Muchas gracias, probaré esto mañana (dejé los archivos en el trabajo).
Para las líneas 7 a 10, supongo que debo ponerlas en mi archivo CSS, ¿verdad?
Atentamente,
-
Hola,
Dado que todo está en la misma página, deberías usar botones en lugar de enlaces.
Por supuesto, puedes usar CSS para darle a tus botones la apariencia de un enlace.Podemos usar algunos trucos en CSS para mostrar/ocultar un elemento, especialmente con pseudo-clases (:focus, :hover, :checked, etc.) y el selector +, pero pronto nos quedamos bastante limitados. Tómate el tiempo para aprender el funcionamiento de las pseudo-clases si no lo has hecho ya.
Un ejemplo básico: https://jsfiddle.net/u8z2q4b9/El selector CSS + permite seleccionar el elemento vecino, lo que obliga en la parte HTML a tener las imágenes al lado de los botones (<button></button> <img>) y no en cualquier lugar del documento.
Si queremos manejar un estado de mostrar/ocultar para cada imagen y mostrar varias imágenes al mismo tiempo, en lugar de usar una pseudo-clase como :focus, podemos usar una checkbox y la pseudo-clase :checked.
Ejemplos aquí: https://css-tricks.com/the-checkbox-hack/Estos trucos pueden ser puntualmente útiles pero restrictivos en la estructura HTML.
Como indicó jee pee, lo mejor es recurrir a JavaScript para añadir interactividad a tu página HTML. -
¡Acabo de probarlo rápidamente y es INCREÍBLE!!!!
¡Exactamente lo que quería!!!!
No son enlaces, pero es aún mejor jaja... No sabía cómo hacer los botones :(
Muchas gracias.
Solo tengo que encontrar cómo colocar las imágenes en el lugar correcto y modificar el formato y la ubicación de los botones (colores, fuente y tamaño), pero creo que con mi archivo debería poder hacer algo jaja.
Gracias de nuevo.
Saludos,
-
¡Ah! Acabo de ver su respuesta Pitet, gracias por el ejemplo y las explicaciones también.
Voy a mirar un poco más las clases y los id xD, apenas estoy empezando a entender el HTML básico, avanzo despacio pero seguro mdr.
En cambio, mi inglés no es excepcional, así que recorro algunos tutoriales en internet en francés cuando tengo suerte.
El javascript probablemente es más útil, pero por ahora solo lo conozco de nombre. Solo quiero hacer un sitio bastante simple, accesible localmente por mí y mis colegas para mejorar nuestra gestión de edificios.
Como planos con las ubicaciones de los extintores, del sistema SSI, de las redes de GAS y de calefacción.
Así que tengo planos de edificios y en cada plano de cada piso, voy a poner puntos rojos para los extintores y otros símbolos para las otras redes. Un plano por tipo (extintores, SSI, etc...)
Espero lograrlo gracias a ustedes.
Lo siento, no vi su mensaje de inmediato.
Gracias a ustedes dos.
Atentamente,
PD: disculpen por los errores ortográficos, hago 40 cosas al mismo tiempo y no me reviso...
