HTML

How to Create a Dynamic HTML Navigation Page

Learn how to devote an entire page to an image-driven, DHTML navigation system. This code from Dan Wellman will result in a fully functioning, interactive navigation page that loads a new page whenever a specified location of the window is passed over by the central image.

Author Info:

By: Dan Wellman

Poor Best

Rating:

/ 36

September 07, 2004

TABLE OF CONTENTS:

· How to Create a Dynamic HTML Navigation Page
· Web Animation Doesn't Always Mean Flash
· Subroutines
· The Remaining Subroutines
· Wrap'n it Up
· Images to Use

<html>
<head>
<title>Alternative Navigation System</title>
<script language="vbscript">
dim leftButtonDown
dim upbuttonDown
dim rightButtonDown
dim downButtonDown
dim animator
sub flyLeft
if leftButtonDown=1 then
   call moveImage(saucer,-1,0)
   if window.saucer.style.left="75px" then
    window.location="info.htm"
   end if
else
   exit sub
end if
End sub
sub flyUp
if upButtonDown=1 then
   call moveImage(saucer,0,-1)
   if window.saucer.style.top="75px" then
    window.location="shop.htm"
   end if
else
   exit sub
end if
End sub
sub flyRight
if rightButtonDown=1 then
   call moveImage(saucer,1,0)
   if window.saucer.style.left="450px" then
    window.location="help.htm"
   end if
else
   exit sub
end if
End sub
sub flyDown
if downButtonDown=1 then
   call moveImage(saucer,0,1)
else
   exit sub
end if
End sub
sub buttonLeft_onMouseDown
animator=window.setInterval("flyLeft", 10)
leftButtonDown=1
End sub
sub buttonLeft_onMouseUp
window.clearInterval(animator)
leftButtonDown=0
end sub
sub buttonUp_onMouseDown
animator=window.setInterval("flyUp", 10)
upButtonDown=1
End sub
sub buttonUp_onMouseUp
window.clearInterval(animator)
upButtonDown=0
end sub
sub buttonRight_onMouseDown
animator=window.setInterval("flyRight", 10)
rightButtonDown=1
End sub
sub buttonRight_onMouseUp
window.clearInterval(animator)
rightButtonDown=0
end sub
sub buttonDown_onMouseDown
animator=window.setInterval("flyDown", 10)
downButtonDown=1
End sub
sub buttonDown_onMouseUp
window.clearInterval(animator)
downButtonDown=0
end sub
sub moveImage(ElementID,LeftMovementAmount,TopMovementAmount)
pPositionLeft=InStr(ElementID.style.left,"px")
pPositionTop=InStr(ElementID.style.top,"px")
ElementID.style.left=CInt(Left(ElementID.style.left,pPositionLeft-1))+LeftMovementAmount
ElementID.style.Top=CInt(Left(ElementID.style.top,pPositionTop-1))+TopMovementAmount
End sub
</script>
</head>
<body>
<div id=info Style="position:absolute;left:50px;top:250px;">
<img src="info.gif" border="0">
</div>
<div id=shop Style="position:absolute;left:350px;top:50px;">
<img src="shop.gif" border="0">
</div>
<div id=help Style="position:absolute;left:650px;top:250px;">
<img src="help.gif" border="0">
</div>
<div id=saucer Style="position:absolute;left:275px;top:250px;">
<img src="saucer.gif" border="0">
</div>
<div id=buttonUp Style="position:absolute;left:350px;top:403px;">
<img src="up.gif" border="0">
</div>
<div id=buttonLeft Style="position:absolute;left:236px;top:480px;">
<img src="left.gif" border="0">
</div>
<div id=buttonRight Style="position:absolute;left:423px;top:480px;">
<img src="right.gif" border="0">
</div>
<div id=buttonDown Style="position:absolute;left:350px;top:525px;">
<img src="down.gif" border="0">
</div>
</body>
</html>

And you should have a fully functioning, interactive navigation page that loads a new page whenever a specified location of the window is passed over by the central image.

Next: Images to Use >>