Tengo una página HTML con una imagen que he configurado para que sea invisible mediante CSS visibility: hidden
. Quiero hacer un enlace llamado "Mostrar la imagen", de modo que cuando hago clic en él, la imagen aparece.
Ahora, no sé cómo hacer tal enlace, ya que normalmente un enlace con <a href=...>
enlaza con alguna otra página. En mi caso, quiero que el enlace invoque un JavaScript para mostrar la imagen.
Si ya tiene definida una función JavaScript llamada showImage
para mostrar la imagen, puede enlazarla como tal:
<a href="javascript:showImage()">show image</a>
Si necesitas ayuda para definir la función, yo probaría:
function showImage() {
var img = document.getElementById('myImageId');
img.style.visibility = 'visible';
}
O, mejor aún,
function setImageVisible(id, visible) {
var img = document.getElementById(id);
img.style.visibility = (visible ? 'visible' : 'hidden');
}
Entonces, sus enlaces serían:
<a href="javascript:setImageVisible('myImageId', true)">show image</a>
<a href="javascript:setImageVisible('myImageId', false)">hide image</a>
Es muy sencillo.
HTML:
<img id="theImage" src="yourImage.png">
<a id="showImage">Show image</a>
JavaScript:
document.getElementById("showImage").onclick = function() {
document.getElementById("theImage").style.visibility = "visible";
}
CSS:
#theImage { visibility: hidden; }
Este es un ejemplo de funcionamiento:
(usando jQuery)<img id="tiger" src="https://twimg0-a.akamaihd.net/profile_images/2642324404/46d743534606515238a9a12cfb4b264a.jpeg">
<a id="toggle">click to toggle</a>
img {display: none;}
a {cursor: pointer; color: blue;}
$('#toggle').click(function() {
$('#tiger').toggle();
});