Live Preview Untuk Gambar Menggunakan Jquery

Tentu pernah anda mengunjungi website yang ada galeri fotonya .biasanya ada thumbnail atau tampilan gambar yang ukuranya kecil,namun apabila di click akan tampil ukuran aslinya.
Pada trik ini,saya akan memebuat cara yang berbeda untuk melihat gambar dalam ukuran aslinya,dimana apabila kursor mouse berada di atas gambar ( tanpa di click ),maka akan tampil gambar dalam ukuran aslinya.

Untuk lebih jelasnya kita menggunkan pluign jquery image preview (pimg.js)perhatiakn skrip berikut ini yang di tebalkan.


<html>
<head>


<script type="text/javascript" src="jquery-1.4.js"></script>
<script type="text/javascript" src="pimg.js"></script>
<script type="text/javascript" >
$(document).ready(function($){
pimg();
})
</script>

<style type="text/css">
#pimg {
display: none;
position: absolute;
}
</style>
</head>

<body>
<div>
<p><img img_src="images/1.jpg" class="pimg" src="images/1.jpg" width="100" height="65"></p>
<p><img img_src="images/2.jpg" class="pimg" src="images/2.jpg" width="100" height="65"></p>
<p><img img_src="images/3.jpg" class="pimg" src="images/3.jpg" width="100" height="65"></p>
</div>
</body>
</html>

 


JIKA MOUSE DI GERAKAN KE FOTO KECIL SECARA OTOMATIS PREVIEW FOTO BESARNYA AKAN MUNCUL

 

Kunjungi www.prowebpro.com untuk menambah wawasan anda.

Web Design Packages

Paket BasicPaket BusinessPaket Corporate

Address

PT. Proweb Indonesia

 

Please visit: www.proweb.co.id