How to Create a Dynamic HTML Navigation Page - Web Animation Doesn't Always Mean Flash
(Page 2 of 6 )
When thinking about animation for the Net, most people's minds spring instantly to Flash animation, and with good reason too since it's effective and extremely stylish. But why spend money on something as expensive as Flash MX, and then spend months learning how to use it when you can get a similar degree of professionalism using just notepad?
DHTML is fundamentally CSS, HTML and a scripting language. You will of course need some images to make this work, I've included the ones that I used and if you want to use them too, you'll need to download them.
So, open up a basic text editor and get a page laid out with the four control buttons bottom center, the three satellite images at the bottom-left, top-middle and right-bottom respectively, and the moving image kind of central. A point to make here is that the left and right satellite images and the moving image should sit roughly horizontally parallel, with the control buttons beneath. You may also opt for a suitable backdrop, although, if your images have shadows or outer glows, you may not.
This is the kind of layout you're aiming for, and it can be achieved with the use of DIV containers and in-line CSS. Don't forget to name each of your DIVs appropriately. If you've opted to use the supplied graphics and have a similar screen resolution to me (1064x768), the following code should be exactly right:
<html>
<head>
<title>Alternative Navigation System</title>
</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>
If you're using your own images or have a different resolution, you'll probably need to tweak the positioning a little so play around until it looks right. The script for this page is fairly large, and it could easily justify its own script file but for simplicity, it's all in the document head.
Next: Subroutines >>
More HTML Articles
More By Dan Wellman
