Tampilkan/sembunyikan gambar dengan JavaScript

Saya memiliki halaman HTML dengan gambar yang saya atur agar tidak terlihat oleh CSS visibility: hidden. Saya ingin membuat tautan yang disebut "Show image", sehingga ketika saya mengkliknya, gambar akan muncul.

Sekarang, saya tidak tahu bagaimana cara membuat tautan seperti itu, karena biasanya tautan dengan <a href=...> menautkan ke halaman lain. Dalam kasus saya, saya ingin tautan tersebut memanggil JavaScript untuk menampilkan gambar.

Pemrograman
javascript html
10 Maret 2013 в 2:52
35 tayangan
Larutan

Jika Anda sudah memiliki fungsi JavaScript yang disebut showImage yang didefinisikan untuk menampilkan gambar, Anda dapat menautkan seperti itu:

<a href="javascript:showImage()">show image</a>

Jika Anda memerlukan bantuan untuk mendefinisikan fungsi tersebut, saya akan mencoba:

function showImage() {
    var img = document.getElementById('myImageId');
    img.style.visibility = 'visible';
}

Atau, lebih baik lagi,

function setImageVisible(id, visible) {
    var img = document.getElementById(id);
    img.style.visibility = (visible ? 'visible' : 'hidden');
}

Kemudian, tautan Anda akan menjadi:

<a href="javascript:setImageVisible('myImageId', true)">show image</a>
<a href="javascript:setImageVisible('myImageId', false)">hide image</a>
Komentar (1)

Ini cukup sederhana.

HTML:


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

JavaScript:

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

CSS:

#theImage { visibility: hidden; }
railgun
Jawaban edit 26 Juni 2017 в 3:51
Komentar (2)

Berikut ini adalah contoh yang berfungsi: http://jsfiddle.net/rVBzt/ (menggunakan jQuery)



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

img {display: none;}

a {cursor: pointer; color: blue;}

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