Dreamweaver A comprehensive example of making map links

When browsing the web, you can often see some special hyperlinks on the picture, that is, there are several local areas in a picture with different links to the page, such as the map link for this example.

Effect description

The map shows the provinces and municipalities of China, and when you click a specific area on the map, you jump to the description page of the map area, as shown in Figure 39-1.

Creative Thinking

This example will use the Dreamweaver image hotspot function to complete the map link instance.

Operation Steps

(1) Open the map.htm file in the source folder of this instance and insert a map of China on the page, as shown in Figure 39-2.

Hint: The Chinese map used in this example is placed in the Iamges folder in this instance material folder and the picture name is Map.gif.

(2) Draw hot area. Click on the Chinese map on the page, and then draw the hotspot area on the map using the rectangular hotspot tool in the property bar, as shown in Figure 39-3.

(3) When the rectangular hotspot area is drawn, the image properties panel becomes the Hotspot property panel, as shown in Figure 39-4. In the link bar, select the destination page to which you want to link the Hotspot area, and in the Override box, fill in the relevant hint description and make the linked page open in a new window.

Tip: Set "target" here to _blank represents opening a linked document in a new browser window and keeping the current window available. The other options in the target box mean that _parent opens the linked document in the parent frameset where the link is located; The _self represents the opening of a linked document in the current frame, replacing the contents of the frame; The _top represents the opening of linked documents in the outermost frameset of the current document, replacing the contents of all frames.

(4) Draw other hotspot areas. Use the other two hotspot tools in the properties panel the Oval Hotspot tool and the Polygon Hotspot tool can also draw hotspots on a map and set related hotspot properties, using the same method as the rectangular hotspot tool. Readers can use these 3 hotspot tools to continue drawing other hotspot areas on the map and set up links, as shown in Figure 39-5.

(5) Save the page file and press the F12 key to preview it. At this point, the example operation is complete.

The operation of this example is relatively simple, but in the process of making, it is necessary to carefully draw the various regions, each area is best to leave a little space, so as to avoid errors in the selection.