| Viewing Single Post From: Navigation in Banner | |
|---|---|
| Zeerus | Aug 6 2005, 01:14 PM |
Spank My Monkey!
  ![]](http://209.85.12.237/static/1/pip_r.png)
|
I've been browsing some different forums lately, and have noticed how a lot of them have their navigaiton inside their Banner / Logo image. Though you might think this requires a ton of Javascript, it is actually fairly simple. You'll need beginner-level knowledge of HTML. The first thing you need to do is create your banner, complete with navigation. If you're doing this in Photoshop there is a much easier method that I'll explain later. Now that you have your image you'll want to create an image map for it so we can add the links to the navigation. Open up your HTML editor and start creating your image map. Programs like Adobe GoLive and Macromedia Dreamweaver have functions to help with this task. Now, this same method was used for the WebFuzion Media V6 navigation, so I'll use that as an example. Let's create the framework of our navigation. It is very important that the USEMAP and MAP NAME functions both have the same name.
Now we need to add our shapes and coordinates. This is pretty difficult so you'll need your graphic editor open (preferably Photoshop) for quick reference. In the end you should have something like below.
Each shape has a set of four numbers. These numbers represent the cordinate measurements for each corner. Start experimenting until you get what you want. As mentioned earlier, ImageReady can automaitcally code Image Maps using the Image Map Slice tool. Now that you have your coding simply insert it where the original 'Logo' image code was. There you have it. You should now have a working navigation built into your banner. To clean it up the page a little bit more you can use a Javascript code to remove the original sub menu. I hope this has been helpful If you are viewing this tutorial as a guest please register for more. |
| |
 |
|
| Navigation in Banner · General Support | |
7:50 AM Nov 28
