Derek-Jeter.org // V. 2K3 [Welcome Back DJ]

These are just a few of my favorite javascripts from one of my favorite sites, DynamicDrive.com. Move your mouse over the image to see the script in action. If you decide you want to use one for your site, the codes are in the text area, along with instructions.

Gradual Highlight Script *Insert the following code in between your <head> and <title> tags* <script> /* Gradual-Highlight Image Script II- By J. Mark Birenbaum (birenbau@ugrad.cs.ualberta.ca) Permission granted to Dynamicdrive.com to feature script in archive For full source to script, visit http://dynamicdrive.com */ nereidFadeObjects = new Object(); nereidFadeTimers = new Object(); /* object - image to be faded (actual object, not name); * destop - destination transparency level (ie 80, for mostly solid) * rate - time in milliseconds between trasparency changes (best under 100) * delta - amount of change each time (ie 5, for 5% change in transparency) */ function nereidFade(object, destOp, rate, delta){ if (!document.all) return if (object != "[object]"){ //do this so I can take a string too setTimeout("nereidFade("+object+","+destOp+","+rate+","+delta+")",0); return; } clearTimeout(nereidFadeTimers[object.sourceIndex]); diff = destOp-object.filters.alpha.opacity; direction = 1; if (object.filters.alpha.opacity > destOp){ direction = -1; } delta=Math.min(direction*diff,delta); object.filters.alpha.opacity+=direction*delta; if (object.filters.alpha.opacity != destOp){ nereidFadeObjects[object.sourceIndex]=object; nereidFadeTimers[object.sourceIndex]=setTimeout("nereidFade(nereidFadeObjects["+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate); } } </script> *Insert the following code into all of your <img src="> tags so that your <img src="> tags will look something like this <img src="http://www.blahblah.com/blah.gif" border="0" style="filter:alpha(opacity=10)" onmouseover="nereidFade(this,100,30,5)" onmouseout="nereidFade(this,10,50,5)">>* style="filter:alpha(opacity=10)" onmouseover="nereidFade(this,100,30,5)" onmouseout="nereidFade(this,10,50,5)"

Image Change On Mouseover Script *Insert the following code in between your <head> and <title> tags* <script language="JavaScript">  </script> *Insert the following code wherever you want the image to appear.* <a href="http://www.blahblah.com/blah.html" onmouseover="over_image('img0');" onmouseout="off_image('img0')"> <img src="http://www.blahblah.com/blah.gif" border="0" name="img0"> </a> *Don't forget to change all the image and link information. The img0_off image is the image before the mouseover. The img0_on image is the image during mouseover.*

Shaky Image On Mouseover Script *Insert the following code in between your <head> and <title> tags* <style> .shakeimage{ position:relative } </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 } else if (a==2){ shake.style.left=parseInt(shake.style.left)+rector } else if (a==3){ shake.style.top=parseInt(shake.style.top)-rector } else{ shake.style.left=parseInt(shake.style.left)-rector } if (a<4) a++ else a=1 setTimeout("rattleimage()",50) } function stoprattle(which){ stopit=1 which.style.left=0 which.style.top=0 } </script> *Add the following code to any image you want to shake.* onMouseover="init(this);rattleimage()" onMouseout="stoprattle(this);top.focus()" onClick="top.focus()">

Spotlight Image Script *Insert the following code in between your <head> and <title> tags* <style>  </style> *Insert the following code in your <body> tags* <img id="myimage" src="theimage.jpg"> <script language="JavaScript1.2"> //Image spotlight effect- By Erik F (die_schlampe@hotmail.com) //Code enhancements by Dynamicdrive.com //Visit http://www.dynamicdrive.com for this script s = 50; // the size of the spotlight vp = 10; // the visibility percent of the picture startx = 0; // the top position of your sportlight into the image (on start) starty = 0; // the left position of your spotlight into the image (on start) ////////////////////////////////////////////////////////////////// // No need to edit below this line // ////////////////////////////////////////////////////////////////// var IE = document.all?true:false function moveL() { xv = tempX; yv = tempY; myimage.filters.light.MoveLight(1,xv,yv,s,true); } if (IE&&myimage.filters) document.all.myimage.onmousemove = getMouseXY; var tempX = 0 var tempY = 0 function getMouseXY(e) { tempX = event.offsetX tempY = event.offsetY if (tempX < 0){tempX = 0} if (tempY < 0){tempY = 0} if (t) { moveL(); } return true } var xv = startx; var yv = starty; var t= true; if (IE&&myimage.filters){ myimage.style.cursor="hand"; myimage.filters.light.addAmbient(255,255,255,vp) myimage.filters.light.addPoint(startx,starty,s,255,255,255,255) } </script>