Membuat Keterangan Gambar dengan jQuery

Dalam tutorial ini kita akan membuat keterangan gambar

semi-transparan yang bagus dengan jQuery. Keterangan

gambar tersebut juga disisipi dengan efek hover. Kita

akan menggunakan fadeTo () fungsi jQuery untuk men-

capai semi-transparan. Ini efek yang sangat baik untuk

anda gunakan. Untuk contoh, coba letakkan cursor anda

tepat di atas gambar yang ada di bawah :

Dolphins sleep with only one half of their brain.Dolphins are conscious breathers. If they should go unconscious they would die.

Untuk membuatnya sangatlah mudah, cukup hanya

menambahkan gadget pada blog anda, pilih HTML/
JavaScript kemudian masukkan kode yang berikut ini :

<script type="text/javascript" src="http://h1.ripway.com/syamsudin/caption.js"></script><br /> <script type="text/javascript"><br /> $(window).load(function(){<br /> //for each description div...<br /> $('div.description').each(function(){<br /> //...set the opacity to 0...<br /> $(this).css('opacity', 0);<br /> //..set width same as the image...<br /> $(this).css('width', $(this).siblings('img').width());<br /> //...get the parent (the wrapper) and set it's width same as the image width... '<br /> $(this).parent().css('width', $(this).siblings('img').width());<br /> //...set the display to block<br /> $(this).css('display', 'block');<br /> });<br /> <br /> $('div.wrapper').hover(function(){<br /> //when mouse hover over the wrapper div<br /> //get it's children elements with class descriptio<br /> //and show it using fadeTo<br /> $(this).children('.description').stop().fadeTo(500, 0.7);<br /> },function(){<br /> //when mouse out of the wrapper div<br /> //use fadeTo to hide the div<br /> $(this).children('.description').stop().fadeTo(500, 0);<br /> });<br /> });<br /> </script><br /> <style><br /> div.wrapper{<br /> position:relative; /* important(so we can absolutely position the description div */ <br /> }<br /> div.description{<br /> position:absolute; /* absolute position (so we can position it where we want)*/<br /> bottom:0px; /* position will be on bottom */<br /> left:0px;<br /> display:none; /* hide it */<br /> /* styling bellow */<br /> background-color:black; height: 70px;<br /> font-family: 'tahoma';<br /> font-size:13px;<br /> color:white;<br /> }<br /> div.description_content{<br /> padding:0px;<br /> }<br /> </style><br /> <br /> <!-- wrapper div --><br /> <div class='wrapper'><br /> <img src='URL gambar anda letakkan di sini' /><br /> <div class='description'><br /> <div class='description_content'><center>Letakkan keterangan gambarnya di sini</center></div><br /> </div></div>

KETERANGAN :

Masukkan kode URL gambar anda pada
kode URL gambar anda letakkan di sini

Masukkan juga kalimat yang menerangkan gambarnya
pada kode Letakkan keterangan gambarnya di sini

Sesuaikan besar hurufnya di kode font-size:

Sesuaikan tinggi background keterangan
gambarnya pada kode height:

Sesuaikan juga warna huruf keterangan
gambarnya pada kode color:

Selamat mencoba, good luck!