Webmaster
Tips
[ All Tips ]
A shaky image
To obtain a shaky effect with an image, add the following script to your page between the <head> and </head> tags:
<SCRIPT>
var quakestrength=5
var max_quake=12
var thisspan
var i_quake=0
var pause=5
var x_pos,y_pos
var occupied=0
function quakeme(spanname,x,y) {
if (occupied==0) {
i_quake=0
x_pos=x
y_pos=y
if (document.all) {
thisspan=eval("document.all."+spanname+".style")
}
if (document.layers) {
thisspan=eval("document."+spanname)
}
quakeme2()
}
}
function quakeme2() {
quakestrength=quakestrength*(-1)
if (document.all&&i_quake<max_quake) {
occupied=1
thisspan.posTop+=quakestrength
thisspan.posLeft+=quakestrength
var timer=setTimeout("quakeme2()",pause)
i_quake++
}
else if (document.layers&&i_quake<max_quake) {
occupied=1
thisspan.top+=quakestrength
thisspan.left+=quakestrength
var timer=setTimeout("quakeme2()",pause)
i_quake++
}
else {
clearTimeout(timer)
thisspan.posTop=y_pos
thisspan.posLeft=x_pos
occupied=0
}
}
</SCRIPT>
<STYLE>
.quakestyle {POSITION: absolute}
</STYLE>
You can customise this code by specifying:
- The number of movements producing the shaky effect: var quakestrength=5
- The amplitude of the shaking: var max_quake=12
<SPAN class=quakestyle id=contact style="LEFT: 10px; TOP: 10px">
<A href="#" onmouseover="quakeme('contact','10','10')">
<IMG border=0 src="your_image.jpg"></A>
</SPAN>
Discover all Webmaster tips.