Dynamic Drive DHTML Scripts- Spider Web links

IE5+

Spider web link effect

Author: Dynamic Drive

Note: Modified slightly by DD to disable horizontal scrollbar. Read important note below.

Description: Creativity and ingenuity come together here to form one of the most unique onMouseover effects for your links. With the help of VML, a "spider web" follows the mouse, and expands when moved over designated links. Awesome effect that degrades well with non IE5+ browsers.

Demo: "Just move your mouse over this textlink to see the highlight effect. The script even allows you to use different highlight colors on the very same webpage as this textlink and this textlink are demonstrating."

Directions:

Step 1: Insert the following stylesheet into the <head> section of your page:

Step 2: Insert the below code into the BODY section of your page, immediately following the <BODY> tag itself:

Select All
<SCRIPT> /*********************************************** * Spider Web Links- Copyright (c) Peter Gehrig * Website: http://www.24fun.com * Script available at/modified by Dynamic Drive (http://www.dynamicdrive.com) * This notice must stay intact for use ***********************************************/ // Minor modification by DD to disable horizontal scrollbar /////////////////////////////////////////////////////////////////////////// // CONFIGURATION STARTS HERE /////////////////////////////////////////////////////////////////////////// // the default color of the 8 spiderlines var defaultcolor="#F5F5F5" // the width of the 8 spiderlines while highlighting textlinks (pixels) var lineweighthighlight=14 // the width of the 8 spiderlines while NOT highlighting textlinks (pixels) var lineweightnormal=2 /////////////////////////////////////////////////////////////////////////// // CONFIGURATION ENDS HERE /////////////////////////////////////////////////////////////////////////// function ietruebody(){ return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body } var distancetomouse=0 var mousepos_x=0 var mousepos_x=0 var marginleft=0 var margintop=0 var marginbottom=0 var marginright=0 var margincenterx var margincentery var mousepos_x=0 var mousepos_x=0 if (document.all&&window.print){ document.write('<div id="bodycontent" style="position:relative">') } function initiateanimation(){ marginbottom=ietruebody().clientHeight marginright=ietruebody().clientWidth margincenterx=Math.floor(marginright/2) margincentery=Math.floor(marginbottom/2) rectangulartopleft.to=marginleft+","+margintop rectangulartopright.to=marginright+","+margintop rectangularbottomleft.to=marginleft+","+marginbottom rectangularbottomright.to=marginright+","+marginbottom rectangulartop.to=margincenterx+","+margintop rectangularright.to=marginright+","+margincentery rectangularbottom.to=margincenterx+","+marginbottom rectangularleft.to=marginleft+","+margincentery rectangulartopleft.strokecolor=defaultcolor rectangulartopright.strokecolor=defaultcolor rectangularbottomleft.strokecolor=defaultcolor rectangularbottomright.strokecolor=defaultcolor rectangulartop.strokecolor=defaultcolor rectangularright.strokecolor=defaultcolor rectangularbottom.strokecolor=defaultcolor rectangularleft.strokecolor=defaultcolor } function msover(thiscolorhighlight){ if(document.all&&window.print){ rectangulartopleft.strokecolor=thiscolorhighlight rectangulartopright.strokecolor=thiscolorhighlight rectangularbottomleft.strokecolor=thiscolorhighlight rectangularbottomright.strokecolor=thiscolorhighlight rectangulartop.strokecolor=thiscolorhighlight rectangularright.strokecolor=thiscolorhighlight rectangularbottom.strokecolor=thiscolorhighlight rectangularleft.strokecolor=thiscolorhighlight rectangulartopleft.strokeweight=lineweighthighlight rectangulartopright.strokeweight=lineweighthighlight rectangularbottomleft.strokeweight=lineweighthighlight rectangularbottomright.strokeweight=lineweighthighlight rectangulartop.strokeweight=lineweighthighlight rectangularright.strokeweight=lineweighthighlight rectangularbottom.strokeweight=lineweighthighlight rectangularleft.strokeweight=lineweighthighlight } } function msout(){ if(document.all&&window.print){ rectangulartopleft.strokecolor=defaultcolor rectangulartopright.strokecolor=defaultcolor rectangularbottomleft.strokecolor=defaultcolor rectangularbottomright.strokecolor=defaultcolor rectangulartop.strokecolor=defaultcolor rectangularright.strokecolor=defaultcolor rectangularbottom.strokecolor=defaultcolor rectangularleft.strokecolor=defaultcolor rectangulartopleft.strokeweight=lineweightnormal rectangulartopright.strokeweight=lineweightnormal rectangularbottomleft.strokeweight=lineweightnormal rectangularbottomright.strokeweight=lineweightnormal rectangulartop.strokeweight=lineweightnormal rectangularright.strokeweight=lineweightnormal rectangularbottom.strokeweight=lineweightnormal rectangularleft.strokeweight=lineweightnormal } } function momouse(){ if(document.all&&window.print){ mousepos_x=ietruebody().scrollLeft+event.clientX mousepos_y=ietruebody().scrollTop+event.clientY rectangulartopleft.from=mousepos_x+","+mousepos_y rectangulartopright.from=mousepos_x+","+mousepos_y rectangularbottomleft.from=mousepos_x+","+mousepos_y rectangularbottomright.from=mousepos_x+","+mousepos_y rectangulartop.from=mousepos_x+","+mousepos_y rectangularright.from=mousepos_x+","+mousepos_y rectangularbottom.from=mousepos_x+","+mousepos_y rectangularleft.from=mousepos_x+","+mousepos_y } } if(document.all&&window.print){ //document.body.className="disableHscroll" ietruebody().className="disableHscroll" code="<v:line id=rectangulartopleft style='LEFT:0;POSITION:absolute;TOP:0;' strokeweight='"+lineweightnormal+"pt'></v:line>" code+="<v:line id=rectangulartopright style='LEFT:0;POSITION:absolute;TOP:0;' strokeweight='"+lineweightnormal+"pt'></v:line>" code+="<v:line id=rectangularbottomleft style='LEFT:0;POSITION:absolute;TOP:0;' strokeweight='"+lineweightnormal+"pt'></v:line>" code+="<v:line id=rectangularbottomright style='LEFT:0;POSITION:absolute;TOP:0;' strokeweight='"+lineweightnormal+"pt'></v:line>" code+="<v:line id=rectangulartop style='LEFT:0;POSITION:absolute;TOP:0;' strokeweight='"+lineweightnormal+"pt'></v:line>" code+="<v:line id=rectangularright style='LEFT:0;POSITION:absolute;TOP:0;' strokeweight='"+lineweightnormal+"pt'></v:line>" code+="<v:line id=rectangularbottom style='LEFT:0;POSITION:absolute;TOP:0;' strokeweight='"+lineweightnormal+"pt'></v:line>" code+="<v:line id=rectangularleft style='LEFT:0;POSITION:absolute;TOP:0;' strokeweight='"+lineweightnormal+"pt'></v:line>" document.body.insertAdjacentHTML("afterBegin",code) document.onmousemove=momouse window.onload=initiateanimation } </SCRIPT>

With the above in place, to give a particular text link on your page the spider effect, add to it the below onMouseover/onMouseout code, as shown here:

<a href="http://mydomain.com" onMouseOver="msover('#FFEEEE')" onMouseOut="msout()">
Test link</a>

Enjoy!

Important note

This script explicitly disables the horizontal scrollbar of the browser, which the spider effect adds, from appearing. If your page contains content which may require the H scrollbar to view (ie: a table with width set to 1500px, text wrapped inside a <nobr> tag etc, you will want to take out the code:

.disableHscroll{
width:100%;overflow-x:hidden;overflow-y:scroll;
}

from the style sheet of Step 1. This throws back in the horizontal scrollbar.

Wordpress Users: Step by Step instructions to add ANY Dynamic Drive script to an entire Wordpress theme or individual Post