Apapun yang terjadi kepada Anda, akan tetap menjadi sesuatu yang menguatkan Anda, bila Anda tidak mengijinkannya untuk melemahkan Anda.Maka mulailah dari tempat di mana Anda berada, dan mulailah sekarang. Anda sampai, hanya karena Anda berangkat.Dan ingatlah, bahwa Batas waktu itu dibuat bukan karena Anda harus selesai, tetapi karena Anda harus segera memulai. Dan setelah pengertian ini mendapatkan tempat yang kuat di hati Anda, perjelaslah bagi diri Anda sendiri, bahwa Keberhasilan Anda ada pada tempat yang lebih tinggi dari yang sedang Anda kerjakan sekarang. Kemudian, janganlah berlaku seperti orang yang mengeluhkan apa saja yang tidak terlihat di dalam sebuah gambar, Berfokuslah pada yang telah jelas terlihat, karena dari sana lah Anda mencapai tempat-tempat yang belum terlihat bahkan oleh imajinasi Anda. Lalu bekerja keraslah dalam kedamaian bahwa Anda telah melakukan yang benar. Janganlah berupaya menjelaskan mengapa Anda tidak mencapai yang belum Anda capai. Bekerjalah untuk mencapai yang telah jelas bagi Anda. Maka, Mulailah keberhasilan Anda dari mana pun Anda berada.(Mario Teguh)

21 Apr 2009

Memasang (Installing) Dynamic Image Selector

Secara teroritis saya kurang memahami secara detail apa itu Dynamic Image Selector, tapi saya sudah pernah mempraktekan dan alhamdulillah berhasil. Secara umum dapat saya gambarkan bahwa Dynamic Image Selector pada dasarnya adalah menu list yang apabila diklik memunculkan gambar tertentu sesuai konfigurasi yang diinginkan. Jika berhasil maka hasilnya akan seperti gambar di bawah ini:



Fasilitas ini bisa juga temen-temen gunakan mislanya kalau temen2 ingin memberikan review buku, photo, dll.
Untuk memasangnya tidak terlalu rumit, cukup memasangnya ke dalam halaman blog dengan menggunakan gadget javascript, langkah-langkahnya:

1. Masuk Layout
2.Tambah Gadget
3. Pilih Gadgdet Javascript
4. Paste kode di bawah ini:


<form name="dynamicselector">
<table border="0" width="100%" cellspacing="0" cellpadding="0" height="178">
<tr>
<td width="35%" valign="top" align="left">
<select name="dynamicselector2" size="4" onChange="generateimage(this.options[this.selectedIndex].value)">

<option value="http://images.amazon.com/images/P/1565924940.01.TZZZZZZZ.jpg" selected>DHTML Guide</option>
<option value="http://images.amazon.com/images/P/0201353415.01.TZZZZZZZ.jpg">DHTML QuickStart</option>
<option value="http://images.amazon.com/images/P/1556225865.01.TZZZZZZZ.jpg">HTML4</option>
<option value="http://images.amazon.com/images/P/1861001746.01.TZZZZZZZ.jpg">IE5 DHTML</option>
</select>
</td>
<td width="65%" valign="top" align="left"><ilayer id="dynamic1" width=100% height=178><layer id="dynamic2" width=100% height=178><div id="dynamic3"></div></layer></ilayer></td>
</tr>
</table>
</form>

<script>

//Dynamic Image selector Script- © Dynamic Drive (www.dynamicdrive.com)
//For full source code, installation instructions,
//100's more DHTML scripts, visit dynamicdrive.com

//enter image descriptions ("" for blank)
var description=new Array()
description[0]="DHTML: The Definitive Guide"
description[1]="DHTML Visual QuickStart Guide"
description[2]="HTML 4 and DHTML"
description[3]="IE5 DHTML Reference"

var ie4=document.all
var ns6=document.getElementById
var tempobj=document.dynamicselector.dynamicselector2
if (ie4||ns6)
var contentobj=document.getElementById? document.getElementById("dynamic3"): document.all.dynamic3
function generateimage(which){
if (ie4||ns6){
contentobj.innerHTML='<center>Loading image...</center>'
contentobj.innerHTML='<center><img src="'+which+'"><br><br>'+description[tempobj.options.selectedIndex]+'</center>'
}
else if (document.layers){
document.dynamic1.document.dynamic2.document.write('<center><img src="'+which+'"><br><br>'+description[tempobj.options.selectedIndex]+'</center>')
document.dynamic1.document.dynamic2.document.close()
}
else
alert('You need NS 4+ or IE 4+ to view the images!')
}

function generatedefault(){
generateimage(tempobj.options[tempobj.options.selectedIndex].value)
}

if (ie4||ns6||document.layers){
if (tempobj.options.selectedIndex!=-1){
if (ns6)
generatedefault()
else
window.onload=generatedefault
}
}

</script>


5.Simpan
6. Letakan di tempat yang temen-temen inginkan
7. Simpan untuk memastikan perpindahan gadget
8. Lihat

Tampilan menu list dan preview gambarnya tentu masih standar, temen2 dapat mengonfigurasinya sesuai kebutuhan, termasuk jumlah menu list dan gambar yang dipreview pun jumlahnya tidak terbatas.

Sambil temen-temen memperhatikan hasilnya, tolong perhatikan kode-kode berikut, kemudian editlah sesuai keinginan, memang perlu sedikit dipelototin (hehehe...), berikut kode-kode yang perlu dikonfigurasi:

<option value="http://images.amazon.com/images/P/1565924940.01.TZZZZZZZ.jpg" selected>DHTML Guide</option>
<option value="http://images.amazon.com/images/P/0201353415.01.TZZZZZZZ.jpg">DHTML QuickStart</option>
<option value="http://images.amazon.com/images/P/1556225865.01.TZZZZZZZ.jpg">HTML4</option>
<option value="http://images.amazon.com/images/P/1861001746.01.TZZZZZZZ.jpg">IE5 DHTML</option>

Di atas adalah kode-kode yang tampil dalam list menu

Kode ini juga tolong diperhatikan:


description[0]="DHTML: The Definitive Guide"
description[1]="DHTML Visual QuickStart Guide"
description[2]="HTML 4 and DHTML"
description[3]="IE5 DHTML Reference"

Di atas adalah kode-kode yang membentuk preview gambar.

Tidak ada komentar:

Posting Komentar

SOBAT KANG JURED