How to make map connection skillfully using Dreamweaver

Dreamweaver

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 map links.

　　Effect Description: The map shows the provinces and municipalities in China, when the map to click on a specific area, it will jump to the corresponding map area of the description page.

　　creation thought: This example will use Dreamweaver's image hotspot function to complete the map link instance.

　　Operation Steps

(1) Create a new HTML file named Map.htm file, insert a map of China in the page, as shown in Figure 1.

Hint: This example uses the map of China China.jpg.

(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 2.

(3) When the rectangular hotspot area is drawn, the image properties panel becomes the Hotspot property panel, as shown in Figure 3. 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 meaning of the other options in the Target box is that _parent opens a linked document in the parent frameset where the link is located; _self opens the linked document in the current frame and replaces the contents of the frame; _top opens the linked document in the outermost frameset of the current document, replacing the contents of all the 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. You can use these 3 hotspot tools to continue drawing other hotspot areas on the map and set up links, the final effect is shown in Figure 4.

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

Here I have only to draw you 3 provinces of the region! Objective to teach you how to do this kind of Web page, by learning This example, is it easy to feel? Of course, if you want to set up the whole map of the connection is very troublesome Ah! It's mainly a waste of time! This is where the tutorial is written.

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.