Hafiz Zulkafly

Tutorial : Image Shake Hover (Blogskins)

Monday, February 13, 2012

Assalamualaikum & Salam Sejahtera



Ada orang request tutorial ni. So harap boleh follow slow slow sebab tutorial ni sedikit mengelirukan. Kalau tak paham banyakkan tanya k. Ahaks


1) Copy Code bawah ni then paste bawah code </html>



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



2) Dah ? Okay , itu css untuk shake hover . Nak bagi gambar bergerak kena copy code bawah ni pulak . Hover ni tak sama macam hover lain . Dia cuma akan shaking bila kite copy code bawah ni and pastekan url gambar tertentu dekat code bawah ni je . So hanya gambar yang korang pastekan dekat code bawah ni je yang akan shaking. Got it ?


<img src="URL IMAGE KORANG"width="500" class="shakeimage" onMouseover="init(this);rattleimage()" onMouseout="stoprattle(this);top.focus()" onClick="top.focus()">



Faham takk ? Aku dah cube explain baik baik . tapi takat ni je mampu . Mulanya taknak buat tutor ni sebab takot korang tak paham . Tapi aku cuba buat gakk . Harap korang paham .

5 comments

  1. Apis. Kenapa Tyka cari code html takde ? tutor ni utk blogskin kan?

    ReplyDelete
  2. hey apis :) na tanya ni. kenapa takley na copy code T.T tak dibenarkan highlight. XOXO

    ReplyDelete
  3. Assalamualaikum ya akhi.
    Alhamdulillah,saya banyak guna/follow tutorial image hover abang Hafiz dan ia menjadi! Terima kasih daun keladi :D Do visit and follow my site http://ketod.blogspot.com/2013/02/no-matter-what-happenbe-strong.html :)

    ReplyDelete

© 2017 HAFIZ ZULKAFLY ALL RIGHTS RESERVED