ptg 174 Chapter 7 Creating Image Map Hotspots Create a Client-Side Image Map Open the Web page with the image you want to use to create an image map. Place the image into the document that you want to use to create your image map. Click the Window menu, and then click Properties to display the Properties panel. Create an image map using the following tools: ◆ Hotspot Tools. Select the Rectangular, Oval, or Polygon hotspot tool, and draw an area on the selected image (this area represents the clickable link area for the visitor). ◆ Pointer Tool. Select the Pointer tool to select, move, or modify the hotspot. Click OK to continue. Hotspot properties appear in the Properties panel. 5 4 3 2 1 Image maps are an image that has been sub-divided into regions (hotspots); when a user hovers and clicks within a hotspot, a prede- fined action occurs. For example, you could create a map of the United States with each State as a hot spot; clicking on a specific State would open another Web page and give you the current weather conditions. Dreamweaver allows you to create a client-side map, or a server-side map. Basically, client-side maps store the link information in the HTML document. Therefore, when a visitor clicks a hotspot in the image, the command is sent directly to the server. Server-side maps store the information on the server; while this allows the designer to modify a server-side map; in reality they're much slower, because every time the visitor clicks on a hot spot, the browser must go back to the originating server to map the response. Client-side maps are faster, because the server does not need to interpret where the visitor clicked. Since, in most cases, client-side maps are faster, easier for the visitor, and are supported by almost every browser your visitors are likely to have; it makes sense to include them into your Web pages. 1 4 2 3 5 From the Library of Wow! eBook ptg Chapter 7 Linking Web Pages 175 Enter the link for the active hotspot into the link box. Alternately, you can click the Browse For File button to select the link, or you can click the Point To File button, and drag to the link in the Files or Assets panel. Click the Target list arrow, and then select from the following options: ◆ _blank. Opens the linked page in a new window. ◆ _parent. Loads the linked document in the immediate frameset of the active document. ◆ _self. Loads the linked document in the same browser window (default). ◆ _top. Loads the linked document in the topmost window of a frameset. Enter the alternate text. Used by reader applications for the visually impaired, and for text-only browsers. Continue using the hotspot tools until you have completed the client-side image map. 9 8 7 6 Hotspot 9 8 6 7 From the Library of Wow! eBook ptg 176 Chapter 7 Modifying Image Map Hotspots Modify Image Map Hotspots Open the Web page with the image map you want to change. Click the Window menu, and then click Properties to display the Properties panel. Click the Pointer tool. Edit an image map using the following tools: ◆ Select Multiple Hotspots. Press and hold the Shift key, and then click each hotspot you want to select. TIMESAVER Press Ctrl+A (Win) or A +A (Mac) to select all the hotspots. ◆ Move Hotspots. Drag the hotspot to a new location. TIMESAVER Use the arrow keys to move a hotspot by 1 pixel. Use the Shift + arrow keys to move a hotspot by 10 pixels. ◆ Resize Hotspots. Drag a hotspot selector handle. ◆ Arrange Hotspots. Select a hotspot, click the Modify menu, point to Arrange, and then click Bring To Front or Bring To Back. ◆ Copy Hotspots. Select the hotspot you want to copy, click the Edit menu, click Copy, click the Edit menu, and then click Paste. 4 3 2 1 After you create some hotspots in an image map, you can modify them to create the links you want. Using the Pointer tool in the Properties panel, you can select one or more hotspots, move a hotspot area to a new location, resize a hotspot shape, or arrange the stacking order for overlapping hotspots in an absolutely-positioned element (AP element). If you want to duplicate a hotspot for use in the same image map or another one, you can copy and paste it. When you copy an image with one or more hotspots, the hotspots are copied along with the image. 3 1 4 2 From the Library of Wow! eBook ptg Chapter 7 Linking Web Pages 177 A null link is an undesignated link, while a script link executes JavaScript code or a call to a JavaScript function. A null link is a useful way to activate a link without specifying a target. You can also use a null link to attach behaviors to objects or text on a page. A script link is useful for performing an action, such as performing calculations, with- out leaving the current Web page. Creating a Null or Script Link Create a Null or Script Link Open the Web page that you want to create a link. Select the text, an image, or an object you want to use to create a null or script link. Click the Window menu, and then click Properties to display the Properties panel. Use the following options to create a link: ◆ Null. Type javascript:; (the word javascript followed by a colon, followed by a semicolon) in the Link box. ◆ Script. Type javascript: (the word javascript followed by a colon) followed by JavaScript code or a function call. Do not type a space between the colon and the code or call. 4 3 2 1 1 4 2 3 Attaching JavaScript Behaviors to Links There are several commonly used behaviors you can attach to any link in a Web page. These include Set Text Of Status Bar, Open Browser Window, and Jump Menu. Set Text Of Status Bar allows you to display a text message in the status bar, which is useful for describing a link destination. Open Browser Window lets you to open a URL in a separate new window. Jump Menu provides a way to edit a jump menu. For Your Information From the Library of Wow! eBook ptg 178 Chapter 7 As with any design application, things can change; including links. Say for example, you create a link to a specific site, and the original site owner changes its address. It's even possible that you created the link and mistyped the link… surely that could never happen. The good news is that just like any other computer application, mistakes are rela- tively easy to correct, and modifying a link is no exception. Modifying a Link Modify a Link Select the link you want to change in the Design window. Click the Window menu, and then click Properties to display the Properties panel. Modify the link using the following options: ◆ Link. Modify the name or path of the link by changing the link information, located within the Link input box. Alternately, you can click the Browse For File button, and then locate the file, or you can click the Point To File button, and then drag over to the Files or Assets panel. TIMESAVER Right-click the link, click Change Link, select the file you want to link to, and then click OK. ◆ Target. Click the Target list arrow, and then select from the following options: ◆ _blank. Opens the linked page in a new window. ◆ _parent. Loads the linked document in the immediate frameset of the active document. ◆ _self. Loads the linked document in the same browser window (default). ◆ _top. Loads the linked document in the topmost window of a frameset. 3 2 1 3 1 2 From the Library of Wow! eBook ptg Chapter 7 Linking Web Pages 179 Removing a link is a lot easier than creating one. As a matter of fact, it only takes a second or two of your precious time. There are several dif- ferent ways to remove a link. You can delete the contents of the Link box in the Properties panel, use the Remove Link command, or delete the image or text and the link. Removing an entire link is simple, just select the graphic, or text that represents the link, and then press the Backspace (Win) or Delete (Mac) key. Removing a Link Remove a Link Select the text or graphic that contains the link. TIMESAVER Right-click the link, and then click Remove Link. Click the Window menu, and then click Properties to display the Properties panel. Click in the Link box, and then erase all the text. The link is now removed. ◆ To prev ent a link er ror, en ter the # (null) symbol in the Link box. 3 2 1 1 3 2 From the Library of Wow! eBook . the hotspot to a new location. TIMESAVER Use the arrow keys to move a hotspot by 1 pixel. Use the Shift + arrow keys to move a hotspot by 10 pixels. ◆ Resize Hotspots. Drag a hotspot selector. reader applications for the visually impaired, and for text-only browsers. Continue using the hotspot tools until you have completed the client-side image map. 9 8 7 6 Hotspot 9 8 6 7 From. modify the hotspot. Click OK to continue. Hotspot properties appear in the Properties panel. 5 4 3 2 1 Image maps are an image that has been sub-divided into regions (hotspots); when a user