| Welcome to Abstracted.View. We hope you enjoy your visit. You're currently viewing our forum as a guest. This means you are limited to certain areas of the board and there are some features you can't use. If you join our community, you'll be able to access member-only sections, and use many member-only features such as customizing your profile, sending personal messages, and voting in polls. Registration is simple, fast, and completely free. Join our community! If you're already a member please log in to your account to access all of our features: |
| Navigation in Banner; For InvisionFree | |
|---|---|
| Topic Started: Aug 6 2005, 01:14 PM (273 Views) | |
| Zeerus | Aug 6 2005, 01:14 PM Post #1 |
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. |
| |
 |
 
|
| + Bird-E | Aug 6 2005, 04:39 PM Post #2 |
|
Dedicated member
|
I remember using the mapping technique on an old site I made. Good work on the tutorial, I havent had a chance to use it though. |
|
|
|
| 1 user reading this topic (1 Guest and 0 Anonymous) | |
| « Previous Topic · General Support · Next Topic » |
8:41 AM Nov 8
