07 / 01 / 2012

How to create Shaking Image on Hover

To experience live preview, mouse over to this image:

Copy these codes and paste it above </style>

.shakeimage{
position:relative
}

Paste this codes under <head>

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

Paste this to where ever you want the image to be placed. You can have more than one image placed anywhere in your blog.

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

credit  Goodluck ! 🙂
»
«
»
«

A personal & design blog based in Malaysia. Blog is still under construction but enjoy your visit!

Search this blog

category

Blogging Personal Tutorials Freebies Category Category

subscribe this blog

My Bloglist

Sponsor


Random post from this blog



© 2011-2017 WANASEOBY.COM