Thursday, January 12, 2012

Tutorial: JQuery Image Hover


Tuto kali ini pasal jquery image hover . Cuba korang halakan cursor ni kat gambar
atas . Gambar tu jadi kabur kan . Tula namanya jquery image hover .
Kalau nak boleh follow step bawah ni . Credit to : Pija

1 Dashboard > Design > Edit HTML > Tick Expand Widget Template

2 Search code ni  <head>

3 Sekarang copy code kat bawah ni dan pastekan selepas/bawah <head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(".post img").fadeTo("slow", 1.0);
$(".post img").hover(function(){
$(this).fadeTo("slow", 0.5);
},function(){
$(this).fadeTo("slow", 1.0);
});
});
</script>
<script type='text/javascript'>
$(document).ready(function(){
$(".latest_img").fadeTo("slow", 1.0);
$(".latest_img").hover(function(){
$(this).fadeTo("slow", 0.5);
},function(){
$(this).fadeTo("slow", 1.0);
});
});
</script>
4 Savekan ! 

No comments: