Full version: jsB@nk » Menu » Rollover EarthQuake: shaking buttons for your menu
URL: https://www.javascriptbank.com/rollover-earthquake-index.html
New rollover effect: just touch a menu-button and the button will start shaking like a tree in a earthquake. Simple. Small.
Full version: jsB@nk » Menu » Rollover EarthQuake: shaking buttons for your menu
URL: https://www.javascriptbank.com/rollover-earthquake-index.html
<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--><SCRIPT>/*CREDITS:Menu EarthQuake- ฉ Peter Gehrig and Urs DudliCONFIGURATION:-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 earthquakevar quakestrength=5// duration of earthquakevar max_quake=12// ------------------------------------------------------------------------------// Do not edit the script below the linevar thisspanvar i_quake=0var pause=5var x_pos,y_posvar occupied=0function quakeme(spanname,x,y) {if (occupied==0) {i_quake=0x_pos=xy_pos=yif (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=1thisspan.posTop+=quakestrengththisspan.posLeft+=quakestrengthvar timer=setTimeout("quakeme2()",pause)i_quake++}else if (document.layers&&i_quake<max_quake) {occupied=1thisspan.top+=quakestrengththisspan.left+=quakestrengthvar timer=setTimeout("quakeme2()",pause)i_quake++}else {clearTimeout(timer)thisspan.posTop=y_posthisspan.posLeft=x_posoccupied=0}}</SCRIPT><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><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-->http://javascriptbank.com/javascript/menu/Rollover_EarthQuake/Rollover_EarthQuake_images.zip