Formatting Basics: Images

Image map editor

Let's look a little closer at one of the specific features of the Dreamweaver image inspector: the image map editor. With an image selected, direct your attention to the lower left corner of the image inspector palette. There you will see options for creating image maps:

The blank text field is where you give your image map a name. The selector arrow allows you to select the individual "hot spots" on your image. The three shape tools are used to create the hot spots on your image. Click the rectangle to draw a rectangular hot spot. Click the circle to draw a circular hot spot. Click the polygon to draw an irregularly-shaped hot spot. With the rectangle and circle tools, simply click-hold-and-drag your mouse to define the hot spot. With the polygon tool, click your mouse repeatedly to define the perimeter of the hot spot.

When you have specified a hot spot with the shape tools, your hot spot will appear in a shaded area on your image, like this:

With the hot spot selected, your inspector palette will change to give you the options available for formatting each hot spot.

Your image map should be given a name in the dialog box next to Map. In the Link area, specify the link by inserting the web address or using the browse or point-and-shoot icons. Also give the hot spot a textual description by using the Alt option. If you want your link to open in a new browser window, choose _blank from the Target menu. The other Target menu options are used in frame sets, which we will not cover in this tutorial.

Now that we have covered the basics of formatting and working with your web documents, let's move on to some more challenging topics, starting with HTML's most versatile element: tables.