Tutorial : Image Hover Part 4 (Blogskin)

Assalamualaikum and annyeonghaseyo. Hari ni rienna nak share dengan korang cara untuk letak image shake hover. Contohnya kalau korang gerakkan cursor dekat mana-II image ia akan bergetar/vibrate. Nak cuba tak? Ok jom ikut step ni.

1. Dashboard > Template
2. Tekan Ctrl + f dan cari code <style> atau </style>
3. Copy code di bawah ni

<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>

4. Paste di bawah code tadi
5. Next, korang copy code ni pulak

<imgsrc="URLIMAGE"width="200"height="200"class="shakeimage"
onMouseover="init(this);rattleimage()" onMouseout="stoprattle(this);top.focus()
" onClick="top.focus()">

6. Paste dekat mana-II yang korang nak. Kalau boleh dekat bahagian sidebar
7. Preview & save

oren : URL image
biru : lebar image
hijau : tinggi image