JavaScript ile görüntüyü gösterme/gizleme

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.

Programlama
javascript html
2013ööp52öö2 Mart 2013 в 2:52
30 görünümler
Çözüm

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>
Yorumlar (1)

Oldukça basit.

HTML:


<a id="showImage">Show image</a>

JavaScript:

document.getElementById("showImage").onclick = function() {
    document.getElementById("theImage").style.visibility = "visible";
}

CSS:

#theImage { visibility: hidden; }
railgun
Edited answer 2017ösp51ös15 Haziran 2017 в 3:51
Yorumlar (2)

İşte çalışan bir örnek: http://jsfiddle.net/rVBzt/ (jQuery kullanarak)



<a id="toggle">click to toggle</a>

img {display: none;}

a {cursor: pointer; color: blue;}

$('#toggle').click(function() {
    $('#tiger').toggle();
});
Yorumlar (0)