Tenho uma página HTML com uma imagem que configuro para ser invisível pelo CSS visibilidade: oculta
. Quero fazer um link chamado "Mostrar imagem" para que, quando clico nele, a imagem apareça.
Agora, não sei'não sei como fazer tal ligação, uma vez que normalmente uma ligação com <a href=...>
ligações para alguma outra página. No meu caso, quero que o link invoque um JavaScript para exibir a imagem.
Se já tem uma função JavaScript chamada showImage
definida para mostrar a imagem, pode ligar como tal:
<a href="javascript:showImage()">show image</a>
Se precisar de ajuda para definir a função, eu tentaria:
function showImage() {
var img = document.getElementById('myImageId');
img.style.visibility = 'visible';
}
Ou, melhor ainda,
function setImageVisible(id, visible) {
var img = document.getElementById(id);
img.style.visibility = (visible ? 'visible' : 'hidden');
}
Então, as suas ligações seriam:
<a href="javascript:setImageVisible('myImageId', true)">show image</a>
<a href="javascript:setImageVisible('myImageId', false)">hide image</a>
It's bastante simples.
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; }
Aqui está um exemplo de trabalho:
(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();
});