CSS visibility: hidden
ile görünmez olarak ayarladığım bir resim içeren bir HTML sayfam var. Resmi göster" adında bir bağlantı yapmak istiyorum, böylece üzerine tıkladığımda resim görünecek.
Şimdi, böyle bir bağlantıyı nasıl yapacağımı bilmiyorum, çünkü normalde <a href=...>
içeren bir bağlantı başka bir sayfaya bağlanır. Benim durumumda, bağlantının resmi görüntülemek için bir JavaScript çağırmasını istiyorum.
Görüntüyü göstermek için tanımlanmış showImage
adlı bir JavaScript işleviniz zaten varsa, bu şekilde bağlantı verebilirsiniz:
<a href="javascript:showImage()">show image</a>
Fonksiyonu tanımlamak için yardıma ihtiyacınız varsa, deneyebilirim:
function showImage() {
var img = document.getElementById('myImageId');
img.style.visibility = 'visible';
}
Ya da daha iyisi,
function setImageVisible(id, visible) {
var img = document.getElementById(id);
img.style.visibility = (visible ? 'visible' : 'hidden');
}
O zaman bağlantılarınız şöyle olacaktır:
<a href="javascript:setImageVisible('myImageId', true)">show image</a>
<a href="javascript:setImageVisible('myImageId', false)">hide image</a>
Oldukça basit.
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; }
İşte çalışan bir örnek:
(jQuery kullanarak)<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();
});