Sabtu, 09 Januari 2010

Membuat gambar thumbnail membesar saat kena penunjuk mouse

Berikut ini adalah contoh penggunaan script css untuk memperbesar ukuran thumbnail gambar saat penunjuk mouse berada di area gambar.
Gambar yang digunakan adalah:
1. http://i49.tinypic.com/2n7pmwx.jpg
2. http://i46.tinypic.com/214umau.jpg
3. http://i48.tinypic.com/208vejc.jpg






<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

/* smart image enlarger starts here */
/* If your images are not linking to other pages leave the links as <a href="#nogo"> Otherwise enlarger won't work in IE6 */

.ienlarger {
float: left;
clear: none; /* set to left or right if needed */
padding-bottom: 5px; /* space between thumbs. Don't change this to margin */
padding-right: 5px; /* space between thumbs and wrapping text when there is any text around it */
}

.ienlarger a {
display:block;
text-decoration: none;
/* add cursor:default; to this rule to disable the hand cursor */
}

.ienlarger a:hover{ /* don't move this positioning to normal state */
position:relative;
}

.ienlarger span img {
border: 1px solid #FFFFFF; /* adds a border around the image */
margin-bottom: 8px; /* pushes the text down from the image */
}

.ienlarger a span { /* this is for the large image and the caption */
position: absolute;
display:none;
color: #FFCC00; /* caption text colour */
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px; /* caption text size */
background-color: #000000;
font-weight: bold;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 13px;
padding-left: 10px;
}

.ienlarger img { /* leave or IE puts a border around links */
border-width: 0;
}

.ienlarger a:hover span {
display:block;
top: 50px; /* means the pop-up's top is 50px away from thumb's top */
left: 90px; /* means the pop-up's left is 90px far from the thumb's left */
z-index: 100;

/* If you want the pop-up open to the left of thumb, remove the left: 90px; and add
right: 90px; This would mean the right side of the pop-up is 90px far from the right side of thumb */

/* If you want the pop-up open above the thumb, remove the top: 50px; and add
bottom: 50px; This would mean the bottom of the pop-up is 50px far from the bottom of thumb */

/* add cursor:default; to this rule to disable the hand cursor only for the large image */
}

.resize_thumb {
width: 150px; /* enter desired thumb width here */
height : auto;
}

/* smart image enlarger ends here */

</style>

Contohnya bisa dilihat disini membuat gambar thumbnail membesar saat kena penunjuk mouse Image Enlarger

Artikel Terkait:



8 komentar blog:

Innah mengatakan...

Salam kenal ya.., alhamdullah dapat ilmu baru mampir di sini, moga blog ini dapat berkah dan memberi mamfaat pada kita semua. Amin. makasih sharenya sob.., mampir yuk di innah blog

kaos couple mengatakan...

bisa otomatis gak gan? jadi tiap ada gambar pada posting bisa langsung tampil zoom setelah di klik.

Syimthea mengatakan...

makasih yah mas, dah bantuin nambah ilmu tentang yang aku cari...hehehe :)

hosting termurah dikelasnya mengatakan...

makasih infonya...bugn sy salut sama blogger satu ini...rajin posting, pr tinggi, ranking jg tinggi...terus jd blogger...

hasan mengatakan...

terimakasih bayak infonya bang, aku bayak belajar dari blog ini,ku do`akan semoga blog ini terus berkembang dan yang mengelolanya selalu ada dalam lindungan Alloh Amien,,,

julia mengatakan...

kalo ini bisa digunakan di wordpress atau hanya di blogger saja gan

Racun Buat Pacar mengatakan...

Sharing ilmu yang sangat brmanfaat

Racun Buat Pacar mengatakan...

Sharing ilmu yang sangat brmanfaat