Text/Chen Xiufeng
When you open a webpage with pictures, you will sometimes see this situation: when the mouse points to different parts of the picture, you can open different hyperlinks. This technology is called - webpage picture hot zone .
Let's take Dreamweaver MX and FrontPage 2003 as examples to see the specific process of establishing a web page image hotspot.
1. Create a hotspot for pictures in Dreamweaver MX
1. Start Dreamweaver MX (please follow the instructions for other versions), open the web page file where you need to create a hotspot for pictures, select the corresponding picture, and the "Properties" panel will automatically switch to "Pictures" Properties" status (Figure 1).
2. Select a hot area type (such as "ellipse"), and then drag it on the picture to create a hot area (see Figure 1)
Figure 1
Note: The hot zone is equivalent to adding a graphics layer to the picture. Just like adjusting the picture, the size and position of the hot zone can be adjusted with the mouse.
3. Enter the URL to be linked in the box to the right of "Link" (such as "http://www.yesky.com"); enter some explanatory characters in the box after "Replacement" (such as "Tianji.com" ); press the drop-down button to the right of "Target" and select a way to open the linked page in the drop-down list that appears (if you want the linked page to open in a new window, select the "_blank" option).
Note: The characters entered in the "Replace" box will be displayed on the page when the mouse points to the hot spot when browsing the web page (Figure 2).
Figure 2
4. Repeat steps 2 and 3 above to create multiple hot spots in different parts of the picture.
2. Create a hot spot for pictures in FrontPage2003
1. Start FrontPage2003 and open the web page file that needs to create a hot spot for pictures.
2. Execute the "View→Toolbar→Picture" command to expand the "Picture" toolbar (Figure 3)
Figure 3
3. Select a hot area type (such as "rectangle"), and then drag a hot area on the picture. At this time, the system will automatically pop up the "Insert Hyperlink" dialog box (Figure 4).
Figure 4
4. Enter the URL to be linked in the "Address" bar (such as "www.yesky.com"); click the "Screen Tips" button to open the "Set Screen Hyperlink Tips" dialog box (Figure 5), enter some Description characters (such as "天极网").
Figure 5
Note: The "Screen Tips" here are the same as the Dreamweaver MX "Alternative" function.
4. In the same way, repeat the above steps 3 and 4 to create multiple hot spots in different parts of the picture.