Sabtu, 16 April 2011

Membuat Gambar Over ketika kursor keluar dari gambar

goto edit html, cari kode </head>
copy paste kode ini diatas </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'/>
<script type='text/javascript'>
$(document).ready(function() {
$('img').fadeTo('slow', 0.5);
$('img').hover(function() {
$(this).fadeTo('slow', 1.0);
}, function() {
$(this).fadeTo('slow', 0.5);
});
});
</script>

save.. beres.. untuk pemahaman java script itu

Memahami Script Code jQuery Image Hover Fade Effect

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'/>


Kode diatas untuk memanggil framework jQuery, jika anda pernah memasangnya, maka kode ini tidak perlu diikutsertakan.

<script type='text/javascript'>

Script identitas bahwa selanjutnya dikenali sebagai JavaScript

$(document).ready(function() {

Fungsi script jQuery telah siap di-load

$('img').fadeTo('slow', 0.5);

Efek fade sebagai efek default (opacity 0.5) pada semua gambar dengan tag img pada seluruh halaman yang di-load

$('img').hover(function() {

Ketika mouse pointer berada di atas gambar (hover) maka...

$(this).fadeTo('slow', 1.0);

Gambar dengan tag img akan diperjelas hingga 1.0

}, function() {

Jika mouse pointer meninggalkan gambar maka...

$(this).fadeTo('slow', 0.5);

Gambar dengan tag img akan memudar (opacity 0.5) lagi.

});
});


Fungsi script jQuery dihentikan

</script>

Fungsi JavaScript di tutup

Tidak ada komentar:

Posting Komentar