How to Create a Dynamic HTML Navigation Page - Wrap'n it Up
(Page 5 of 6 )
Once you've ended the subroutine and then the script tag, you can safely say that your work here is done; save the file with an .htm extension and preview it. Your complete code file should now look like this:
<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 >>
More HTML Articles
More By Dan Wellman
