Good and Nice JavaScripts

[JavaScriptBank]

JavaScript Collector​

Rollover EarthQuake: shaking buttons for your menu

New rollover effect: just touch a menu-button and the button will start shaking like a tree in a earthquake. Simple. Small.... detail

Demo: Rollover EarthQuake: shaking buttons for your menu​

How to setup

Step 1: Copy & Paste CSS code below in your HEAD section
CSS

<STYLE>.quakestyle {
	POSITION: absolute
}
</STYLE>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Step 2: Use JavaScript code below to setup the script
JavaScript

<SCRIPT>
/*
CREDITS:
Menu EarthQuake- ฉ Peter Gehrig and Urs Dudli

CONFIGURATION:
-	Download the ZIP-file of this script.
- 	The script is hidden in the file "imagequakemenu.html".
-	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>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Step 3: Copy & Paste HTML code below in your BODY section
HTML

<SPAN class=quakestyle id=contact 
style="LEFT: 10px; TOP: 10px"><A 
href="http://JavaScriptBank.com" 
onmouseover="quakeme('contact','10','10')">
<IMG border=0 
src="contactgreen152.gif" width="105" height="20"></A></SPAN> <SPAN 
class=quakestyle id=download style="LEFT: 10px; TOP: 50px"><A 
href="http://JavaScriptBank.com" 
onmouseover="quakeme('download','10','50')">
<IMG border=0 
src="downloadgreen152.gif" width="105" height="20"></A></SPAN> <SPAN 
class=quakestyle id=funstuff style="LEFT: 10px; TOP: 90px"><A 
href="http://JavaScriptBank.com" 
onmouseover="quakeme('funstuff','10','90')">
<IMG border=0 
src="funstuffgreen152.gif" width="105" height="20"></A></SPAN> <SPAN 
class=quakestyle id=it style="LEFT: 10px; TOP: 130px"><A 
href="http://JavaScriptBank.com" 
onmouseover="quakeme('it','10','130')">
<IMG border=0 
src="itgreen152.gif" width="105" height="20"></A></SPAN> <SPAN class=quakestyle 
id=sponosr style="LEFT: 10px; TOP: 170px; WIDTH: 120px">

</SPAN>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Step 4: Download files below
Files
Rollover_EarthQuake_images.zip

The Site may provide, or third parties may provide, links to non-JavaScriptBank.com Internet World Wide Web sites or resources. Because JavaScriptBank.com has no control over such sites and resources, you acknowledge and agree that JavaScriptBank.com is not responsible for the availability of such external sites or resources, and does not endorse and is not responsible or liable for any content, advertising, products, or other materials on or available from such sites or resources. You further acknowledge and agree that JavaScriptBank.com shall not be responsible or liable, directly or indirectly, for any damage or loss caused or alleged to be caused by or in connection with use of or reliance on any such content, goods or services available on or through any such site or resource.​