Home arrow HTML arrow Page 2 - How to Create a Dynamic HTML Navigation Page

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: 4 stars4 stars4 stars4 stars4 stars / 59
September 07, 2004
  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

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:

<title>Alternative Navigation System</title>
<div id=info Style="position:absolute;left:50px;top:250px;">
<img src="info.gif" border="0">
<div id=shop Style="position:absolute;left:350px;top:50px;">
<img src="shop.gif" border="0">
<div id=help Style="position:absolute;left:650px;top:250px;">
<img src="help.gif" border="0">
<div id=saucer Style="position:absolute;left:275px;top:250px;">
<img src="saucer.gif" border="0">
<div id=buttonUp Style="position:absolute;left:350px;top:403px;">
<img src="up.gif" border="0">
<div id=buttonLeft Style="position:absolute;left:236px;top:480px;">
<img src="left.gif" border="0">
<div id=buttonRight Style="position:absolute;left:423px;top:480px;">
<img src="right.gif" border="0">
<div id=buttonDown Style="position:absolute;left:350px;top:525px;">
<img src="down.gif" border="0">

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

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


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