How to Create a Dynamic HTML Navigation Page

The remaining subroutines all contribute to the movement of your central image; there are four subroutines, one for each direction, and a master subroutine that actually moves the image. The directional sub's can be constructed as follows:

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

The first IF statement checks whether the appropriate switch is on, and if so, calls the moveImage subroutine and passes the image name and the amount of pixels to move the image left and up to it as parameters. The properties LeftMovementAmount and TopMovementAmount (which are explained in more detail below and can be found residing in the moveImage subroutine), move the element in question either forward (to the right), and down (obviously, this can only mean down), which is why we supply it with minus figures to move left or up. Only moving the image by one pixel at a time, combined with the interval repeater, the movement of the image is kept as smooth as possible. If the switch is not on, the subroutine ends.

The second IF statement checks to see whether the central image has reached a specified location, and if it has, it uses the location property of the window object to open a new page.

You'll need four of the subroutines in total, one for each direction you wish the central image to move in, so your page should end up containing the following code segment:

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

Lastly, we create the master subroutine that ultimately moves your image.

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

This subroutine makes use of several of VB Scripts built-in functions; InStr, which searches for a specified string within another string; Cint, which converts a string into an integer; and Left, which reads and returns a specified number of characters from a string. The moveImage subroutine accepts the arguments passed to it by each of the previously examined flydirection subroutines. The sub' then searches for the position of the string 'px' within the string containing the location of the left edge of the specified element, and assigns this to the variable pPositionLeft. It does this for the locations of both the left edge and top edge of the central image. The remaining lines of code then read the specified string from the left to the character position of 'px' minus 1, so it stops the character before 'p', and then converts the remaining string to an integer, to which it adds the value supplied in the movementAmount call, and sets as the new figure for the elementID.style.left or top properties. It's complicated, but it works.