Home arrow HTML arrow Page 2 - How to Create a Dynamic HTML Navigation Page
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
Rating: 3 stars3 stars3 stars3 stars3 stars / 36
September 07, 2004
TABLE OF CONTENTS:
  1. · How to Create a Dynamic HTML Navigation Page
  2. · Web Animation Doesn't Always Mean Flash
  3. · Subroutines
  4. · The Remaining Subroutines
  5. · Wrap'n it Up
  6. · Images to Use

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
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.


blog comments powered by Disqus
HTML ARTICLES

- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5
- BBC Adopts HTML 5, Mozilla Addresses Issues
- Advanced Sticky Footers in HTML and CSS
- HTML and CSS Sticky Footers
- Strategy Analytics Predicts HTML5 Phones to ...
- HTML5 Guidelines for Web Developers
- Learning HTML5 Game Programming
- More Engaging CSS3 and HTML Background Effec...
- Engaging HTML and CSS3 Background Effects
- More Web Columns with CSS3 and HTML
- Columns with CSS3 and HTML
- Creating Inline-Block HTML Elements with CSS
- Drag and Drop in HTML5: Parsing Local Files

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 2 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials