Membuat Keterangan Pada Gambar Dengan JQuery
Maksud dari tutorial kali ini adalah membuat keterangan pada gambar yang kita tampilan. Manakala cursor diletakkan tepat di atas gambarnya, maka akan muncul deretan tulisan di bagian atas dan bawah gambar tersebut sebagai penjelasan dari gambar yang dimaksud. Dengan adanya efek transparan pada background tulisan keterangannya, membuat gambar dan tulisannya semakin menarik untuk dilihat dan menjadi suatu perpanduan gambar dan tulisan yang kontras. Untuk DEMOnya bisa anda lihat di sini.
Untuk membuatnya, langkahnya adalah :
1. Rancangan -> Tambah Gadget ->
pilih HTML/JavaScript.
2. Letakkan ke dalam kontennya,
kode berikut ini :
KETERANGAN :
Gantilah gambarnya dengan gambar milik anda.Sesuai juga ukuran gambar anda tersebut pada kode
width="360px" height="270px"
Ganti juga tulisan keterangan atas & bawahnyadengan kalimat yang anda inginkan.
3. Lalu masuklah ke Edit HTML
4. Cari kode </b:skin>
5. Letakkan di atas kode </b:skin> ini
kode yang di bawah ini :
.img {
/* relative position, so that objects in it can be positioned inside this container */
position:relative;
font-family:arial;
/* hide those extra height that goes beyong the size of this container */
overflow:hidden;
border:5px solid #000000;
width:360px;
height:270px;
}
.img .heading,
.img .caption {
/* position inside the container */
position:absolute;
KETERANGAN :
Ubah ukuran gambarnya, sesuaikandengan ukuran gambar anda pada kode :
width:360px;
height:270px;
Ubah juga warna, tinggi & lebar backgroundtransparantnya pada kode :
background:#0000ff;
height:50px;
width:360px;
6. Cari lagi kode </head>
7. Letakkan di atas kode </head> ini
kode yang berikut ini,
lalu simpan template anda.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript">
</script>
<script>
$(document).ready(function () {
// transition effect
style = 'easeOutQuart';
// if the mouse hover the image
$('.img').hover(
function() {
//display heading and caption
$(this).children('div:first').stop(false,true).animate({top:0},{duration:200, easing: style});
$(this).children('div:last').stop(false,true).animate({bottom:0},{duration:200, easing: style});
},
function() {
//hide heading and caption
$(this).children('div:first').stop(false,true).animate({top:-50},{duration:200, easing: style});
$(this).children('div:last').stop(false,true).animate({bottom:-50},{duration:200, easing: style});
}
);
});
</script>
</script>
<script>
$(document).ready(function () {
// transition effect
style = 'easeOutQuart';
// if the mouse hover the image
$('.img').hover(
function() {
//display heading and caption
$(this).children('div:first').stop(false,true).animate({top:0},{duration:200, easing: style});
$(this).children('div:last').stop(false,true).animate({bottom:0},{duration:200, easing: style});
},
function() {
//hide heading and caption
$(this).children('div:first').stop(false,true).animate({top:-50},{duration:200, easing: style});
$(this).children('div:last').stop(false,true).animate({bottom:-50},{duration:200, easing: style});
}
);
});
</script>
Selamat mencoba, good luck!
Source: syamsudinnamaku.blogspot.com
