The Tutorial - Using HotSpots
Implementing the menus into your menu bar

This is the final step in the process of creating a menus project.
In this step you will combine the menu bar on your HTML page with the menus you've just created.

This process is accomplished by using the HotSpots Editor.
The HotSpots Editor will load the file containing your hotspots (this is the Target Document defined on your configuration) so you can attach each group on your project to its corresponding hotspot.

To start the HotSpots Editor select Tools->HotSpots Editor.

The HotSpots Editor will present all the hyperlinks found on the page. These are listed under the Available HotSpots list.
Each entry contains the HTML code for each of the hyperlinks. When these hyperlinks are images, a preview of the image (if available) will be displayed in the image preview pane, on the bottom right corner.

Locate the Products hotspot and select it.
Now select from the list groups (available under the Attached Group list) the group named grpProducts.
As soon as you select a group from this list, the group gets attached to the selected hotspot.

Because the hotspot is an image, DHTML Menu Builder will allow you type a name for the selected image. This is very important because without this name, the menus will not be able to auto-align to the hotspots that triggers them.

So, click on the Image Name textbox and type: HSproducts.
The name of the image can be anything, but remember that whatever name you choose it should be a unique name. This means that this same name cannot be used by another image or any other element in your page.

Now select the links hotspot and then select the grpLinks group from the list of groups.
In the Image Name field type: HSlinks

Finally, click on the Install button to commit your changes and the HotSpots Editor will add all the necessary code to your page so the hotspots can react to the mouse actions and display the menus you created.

Now the only thing left is to generate the JavaScript code for your menus.
To do so, simply click on Tools->Compile.

Launch your file with your preferred browser and test the menus.


Final Notes

There's no need to repeat this process (running the HotSpots Editor) unless:

  • You add more groups on your project that need to be attached to a new hotspot
  • You rename one of the groups
  • You change the alignment of one of your groups

If you just make style changes to the items on your project, recompiling (Tools->Compile) will be enough.