Halo Jacoder \m/ jumpa lagi dengan saya yang kali ini akan menunjukkan bagaimana cara membuat sebuah kotak yang berisi dengan gambar DAN apabila cursor diarahkan ke kotak tersebut gambar tadi akan diganti dengan teks. Bingung ya ? :D yuk kita coba buat aja langsung, mudah kok.
Pertama-tama download jquery.js , Kamu bisa download langsung dari situs resmi nya disini lalu embed ke dokumen html kamu.
selanjutnya letakkan skrip javascript berikut ini dibawah embed-an jquery tadi
$(function() {
$('ul.hover_block li').hover(function(){
$(this).find('img').animate({top:'182px'},{queue:false,duration:500});
}, function(){
$(this).find('img').animate({top:'0px'},{queue:false,duration:500});
});
});
Kemudian tambahkan style berikut ke dokumen kamu
ul.hover_block li{
list-style:none;
float:left;
background: #fff;
padding: 10px;
width:300px; position: relative;
margin-right: 20px; }
ul.hover_block li a {
display: block;
position: relative;
overflow: hidden;
height: 150px;
width: 268px;
padding: 16px;
color: #000;
font: 1.6em/1.3 Helvetica, Arial, sans-serif;
}
ul.hover_block li a { text-decoration: none; }
ul.hover_block li img {
position: absolute;
top: 0;
left: 0;
border: 0;
}
Terakhir tambahkan skrip html nya pada bagian <body>
<ul class="hover_block"> <li><a href="/"><img src="your_image.gif" alt="alt" /> Text</a></li> <li><a href="/"><img src="your_image.gif" alt="alt" /> Text.</a></li> </ul>
Note :
- Jangan lupa ganti your_image.gif dengan gambar kamu sendiri
- Kamu bisa mengubah arah animasi nya menjadi keatas kebawah kekanan ataupun kekiri
gulung keatas
<script>
$(function() {
$('ul.hover_block li').hover(function(){
$(this).find('img').animate({top:'-300px'},{queue:false,duration:500});
}, function(){
$(this).find('img').animate({top:'0px'},{queue:false,duration:500});
});
});
</script>
gulung ke kanan
<script>
$(function() {
$('ul.hover_block li').hover(function(){
$(this).find('img').animate({left:'300px'},{queue:false,duration:500});
}, function(){
$(this).find('img').animate({left:'0px'},{queue:false,duration:500});
});
});
</script>
gulung ke kiri
<script>
$(function() {
$('ul.hover_block li').hover(function(){
$(this).find('img').animate({left:'-300px'},{queue:false,duration:500});
}, function(){
$(this).find('img').animate({left:'0px'},{queue:false,duration:500});
});
});
</script> 
