Membuat Show/Hide gambar

Anda mungkin sering mendapatkan di weblog beberapa gambar pada artikelnya di sembunyikan dan apabilah kita ingin melihat gambar tersebut kita diperintahkan untuk mengklik kalimat seperti SHOW/ HIDE, OP3N/ CLOSE atau TAMPILKAN/ SEMBUNYIKAN dll. ini biasa juga disebut Spoiler. nah apabilah kita mengklik butang atau kalimat tersebut maka akan memunculkan gambar, lebih jelasnya lihat 3 contoh berikut: UNTUK CONTOH PERTAMA BELUM TERISI GAMBAR SILAHKAN KLIK CONTOH 2 DAN 3





Judul Spoiler



Nah...sudah paham kan, sekarang tinggal main KOPAS alias kopi paste

Kode Contoh Pertama

<div>

<input value="Tampilkan" style="margin: 0px; padding:0px;width:auto;font-size:10px;" onclick="if(this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display != &#39;&#39;) { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;&#39;; this.innerText = &#39;&#39;; this.value = &#39;Sembunyikan&#39;; } else{ this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;none&#39;; this.innerText = &#39;&#39;; this.value = &#39;Tampilkan&#39;; }" type="button" /></div>
<div class="alt2">
<div style="display: none;">
<div style="background:#000000;text-align:left;padding:10px;color:#ffffff;">
Masukkan text-nya disini. Gambar juga bisa.
</div>
</div>
</div>



Kode Contoh Kedua

<div><div style="margin: 20px; margin-top:5px"><div style="margin-bottom: 2px;" class="smallfont"><input style="margin: 0px; padding: 5px; width: auto; " value="Show" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != ''){ this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hidden'; }else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }"type="button"/></div><div class="alt2"><div style="display: none;"><div style="border: none; color:none; background-color:none; text-align: justify; padding:10px;">
DISINI LETAK KONTENT ANDA</div></div></div></div></div>



Kode Contoh Ketiga

<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><span style="font-weight: bold;">Judul Spoiler</span><input value="Open!!!" style=" margin:5px;padding: 0px; width: 80px; font-size: 10px;" onclick="if (this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display != &#39;&#39;) { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;&#39;; this.innerText = &#39;&#39;; this.value = &#39; Close..&#39;; } else { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;none&#39;; this.innerText = &#39;&#39;; this.value = &#39; Clik Here&#39;; }" type="button" />
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
ISI SPOILER
</div></div></div>

Untuk yang warna biru dan hijauh (judul spoiler) silahkan diganti kalimatnya kalau mau
adapun warna merah tempat kode gambar atau conten anda

bisa di pahami sobat silahkan di cobah. sebenarnya sobat, suber tutorial diatas saya ambil dari http://www.gallerydunia.com

2 komentar:

Jika ada sembarang pertanyaan silahkan komentar disini.