FRIHOST FORUMS SEARCH FAQ TOS BLOGS COMPETITIONS
You are invited to Log in or Register a free Frihost Account!


Spider-Web Link Tutorial





break-the-rules
Go to http://www.dynamicdrive.com/dynamicindex5/spider.htm for demo

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

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

v\:* {
BEHAVIOR: url(#default#VML)
}
</STYLE>

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

<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>
datom
well done!
i can see that you submergence in that Razz
littlegiant
Hmmmm.. Amusing (albeit for a short time.... )

Unfortunately it doesn't work in Firefox...
Related topics
PROFESSIONAL WEB DESIGN TUTORIAL
Is it bad?
WWW File Share Pro
On-line vs. Books
[man]Servidor Web Personal (Tutorial)
Problems With Cron Jobs
Marvel Vs Dc
Best Free Bulletin Boards??
Peoaple actually do this for a hobby!
25 FRIH$ - Build a $600 US Computer
3d Artwork (Part 2)
xml from mysql
Starting your own web server tutorial
Philippines Freelance Web Link Exchange
Reply to topic    Frihost Forum Index -> Miscellaneous -> Tutorials

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2011 Frihost, forums powered by phpBB.