Cara Membuat Efek Gambar Bergetar apabila kesentuh Coursor

Mungkin Anda pernah melihat sebuah Web atau Blog tetangga, dimana apabila tombol kursor didekatkan pada sebuah gambar yang membuat gambar tersebut akan bergetar. Tapi Getaran nya tidak seperti getaran Goyangan Julia Perez ya, hanya sekedar getaran biasa saja. Jika Anda ingin menggunakan Efek ini, biar terkesan blog Anda lebih menarik. Maka pada tutorial Saya kali ini akan Saya berikan Kode apa saja yang kita perlukan agar Efek tersebut bisa terjadi. Ok, Anda Cukup Copas Kode di bawah ini dan lakukan sesuai Tutorial di bawah ini.

Langkah 1:

1. Masuk akun blogger lalu pilih menu Rancangan > Edit Html
2. Jangan Lupa backup dulu template Blog, Jika belum tahu Baca di sini
3. Jangann lupa klik ‘Expand Widget Templates’
4. Cari kode </head>
Letakkan kode dibawah ini diatas langkah Kode pada langkah no.4

<style>
.shakeimage{
position:relative
}
</style>
<script language="JavaScript1.2">

/*
Shake image script (onMouseover)-
© Dynamic Drive (www.dynamicdrive.com)
For full source code, usage terms, and 100's more DHTML scripts, visit http://dynamicdrive.com
*/

//configure shake degree (where larger # equals greater shake)
var rector=3

///////DONE EDITTING///////////
var stopit=0
var a=1

function init(which){
stopit=0
shake=which
shake.style.left=0
shake.style.top=0
}

function rattleimage(){
if ((!document.all&&!document.getElementById)||stopit==1)
return
if (a==1){
shake.style.top=parseInt(shake.style.top)+rector+"px"
}
else if (a==2){
shake.style.left=parseInt(shake.style.left)+rector+"px"
}
else if (a==3){
shake.style.top=parseInt(shake.style.top)-rector+"px"
}
else{
shake.style.left=parseInt(shake.style.left)-rector+"px"
}
if (a<4)
a++
else
a=1
setTimeout("rattleimage()",50)
}

function stoprattle(which){
stopit=1
which.style.left=0
which.style.top=0
}

</script>

5. Silahkan Save template.
Jika kode yang Anda simpan tidak Well-Formed, Silahkan parse dulu kode nya di sini.

Langkah 2:
Kemudian Copas Kode di bawah ini:

class="shakeimage" onMouseover="init(this);rattleimage()" onMouseout="stoprattle(this);top.focus()" onClick="top.focus()"

Dan letakkan pada kode gambar yang Anda punya. Untuk lebih jelas pemasangan nya, perhatikan Kode dibawah ini:

<img src="man.gif" class="shakeimage" onMouseover="init(this);rattleimage()" onMouseout="stoprattle(this);top.focus()" onClick="top.focus()"/>

Sumber: dynamicdrive.com