Using HotSpots

Introduction

This tutorial will guide you through the complete process of creating working menus from scratch.
If you would like to see how the menus, the menu bar and the project will look like at the end, download the ZIP file containing everything mentioned on this tutorial.

Creating the menu bar

There are many ways you can create a menu bar.

The easiest and most recommended is to create a set of images to serve as hotspots and place them inside the cells of a table. Although you could use text instead of images, the use of images is highly recommended. Also, it is very important that you create independent images for each one of your hotspots, instead of creating a single image and then using an image map to define hotspots; the HotSpots Editor (a tool you will learn to use in this tutorial) does not support image maps.

You can use any graphic application to create your hotspot images. Some sample images are provided here for you to use with this tutorial:

To save the above images, just right click on the image and choose Save Picture As... from the context menu.

Open your preferred HTML editing application and create a table with 4 cells in it. Since you will be using images, you can choose any type of alignment for the table and its cells. Then place one image inside each cell. When using images as the hotspots, the menus created with DHTML Menu Builder will be able to auto-align to the images dynamically regardless of the size of the browser or the screen resolution. This is why it is so important the use images instead of text-based hotspots.

Now you must prepare these images so they are ready to accept the menus. Only those images that will display menus need to be prepared. In this tutorial we'll create two menus, one for the Products hotspot and another for the Links hotspot.

The first step is to convert the images into hyperlinks. Each HTML editing application has its own way to create a hyperlink, so you should consult your program's documentation to see how to do this. When you're asked for the target link to which the hyperlink should (the pound or hash sign, typically found above the number 3 on the keyboard) point to, type: # (the pound or hash sign, typically found above the number 3 on the keyboard).

The pound symbol (#) means that this hyperlink will point to itself. This is known as a "null-hyperlink."
(If you want to do this by hand, enclose the image's code in <a> </a> tags:

The source code of the just the Products image should look something like this:
<img border="0" src="products.jpg" width="100" height="30">

After conversion into a null hyperlink, it will look something like this:
<a href="#"><img border="0" src="products.jpg" width="100" height="30"></a>

This is all you need to do to prepare the images that will be used as hotspots.

Create a folder on your hard drive and call it DMB_Tutorial. (For example, "c:\DMB_Tutorial\") Then create an empty HTML file in that folder and name it hotspots.htm. Later in the tutorial you will see how we will use this file as the receiver for the menus.

Now, create a folder called menus inside the c:\DMB_Tutorial\ folder. We will use this folder to store the JavaScript file generated by DHTML Menu Builder.

Finally, create a folder called images inside the c:\DMB_Tutorial\ folder. We will use this folder to store any images you menus may use.

Your folder structure should look similar to the image below.