Uncle Jim's Web Designs: Rollover Image Shake

COPY - Insert Between Head Tags: <HEAD></HEAD>

function selectAll(theField) {
var tempval=eval("document."+theField)
tempval.focus()
tempval.select()
}
//--></script>
<script type="text/javascript"><!-- 
/*
 ______________________________________________________
/秤秤秤秤秤秤秤秤秤秤秤秤秤秤秤秤秤秤秤秤秤秤秤秤秤秤秤\
|          Another JavaScript from Uncle Jim           |
|                                                      |
|   Feel free to copy, use and change this script as   |
|        long as this part remains unchanged.          |
|                                                      |
|      Visit my website at http://www.jdstiles.com     |
|           for more scripts like this one             |
|                                                      |
|                     Created: 1996                    |
|              Last Updated: December, 2005            |
\______________________________________________________/
 秤秤秤秤秤秤秤秤秤秤秤秤秤秤秤秤秤秤秤秤秤秤秤秤秤秤秤
CONFIGURATION:
-	Create a separate span-container for each imagebutton.
-	Give each span-container a unique identity (id) of its own.
-	Link each imagebutton to an URL (of your choice (in this demonstration the URL is "#") 
-	Add a onmouseover-tag to each imagebutton as follows: onMouseOver="quakeme('funstuff','10','90')". 'funstuff' is the name of the span-container 
-                 where the imagebutton resides. '10' is the horizontal position of the imagebutton measured in pixels. '90' is the vertical position of the imagebutton.
-	Copy the style-block and paste it into the head-zone of your menu-file.
-	Copy the script-block and paste it into the head-zone of your menu-file.
-	Configure the strength and duration of the earthquake as follows:
*/

// strength of earthquake
var quakestrength=5

// duration of earthquake
var max_quake=12

// ------------------------------------------------------------------------------
// Do not edit the script below the line
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 type="text/css">
.quakestyle { position:absolute; }
</style>

COPY - Insert Inside Body: <BODY></BODY>

Uncle Jim's JavaScript Examples

Image Quake

Author: Jim Stiles