MYONLINEPROOFING.COM

photography hosting - www.myonlineproofing.com

Menu


Figure 3.43. Use the mailto: option in the Link text box to create an email link on your web page. [View full size image] To accomplish


the same task, you could also use the Insert, Email Link command. The Email Link dialog allows you to enter the text to appear on the page and the email address to be associated with the text. Linking Images Aside from linking text, you can also create links from images. Selecting an image reveals the image-based Properties Inspector which, like the text-based Properties Inspector features a Link text box and a Target menu. To demonstrate how to create a link from an image, follow these instructions: 1. Select the rollover image that you inserted earlier, with the link that allows the user to view the public website. The Properties Inspector changes to an image-based Properties Inspector. 2. Type http://www.dorknozzle.info in the Link text box and press Enter. You may also want to set a target. 3. Select Preview In Browser from the Document bar to test the results in a browser window. Imagemaps The third method of linking is to define an imagemap. An imagemap can be defined as a series of clickable hotspots within an image that, when clicked, navigate the user to the specified page. For our imagemap, we'll use a different header image called header_withnav.gif. Because this is the case, we'll need to replace the current header.gif image with our new image. To replace the image, we'll exploit the point-to-file method for replacing an existing image. With the Site Files panel open on the right side of the screen and the header image selected, drag the point-to-file icon located just to the right of the Src text box in the Properties Inspector and drop it onto the header_withnav.gif image in the File panel as shown in Figure 3.44. Figure 3.44. Use the point-to-file icon to select from the File panel a replacement image to use. [View full size image]   As you can see, the new image contains links created in the image editor to simulate text links. We'll want to define areas in the image so that the linking experience is as seamless as possible. You can define an imagemap in the new image by following these steps: 1. Select the image so that the Properties Inspector becomes an image-based Properties Inspector. 2. The bottom-left corner of the Properties Inspector defines options for working with imagemaps and hotspots including the Map Name text box, the Pointer Hotspot tool, the Rectangular Hotspot tool, the Oval Hotspot tool, and the Polygon Hotspot tool. Select the Rectangular Hotspot tool. 3. The pointer now becomes a cross hair which allows you to draw a square hotspot around an image. Draw a square hotspot around the Home link within the new header image similar to Figure 3.45. Figure 3.45. Draw a rectangular hotspot around the Home link in the header image. [View full size image] 4. As you've probably noticed, the Properties Inspector now becomes a hotspot-based Properties Inspector, which allows you to define the map name, choose a link, a target, and add some Alternate text. For our example, use the point-to-file icon to point to the index.htm file in the Files panel. If you feel you need practice creating hotspots, try and create new hotspot to fictitious links for the other links in the header image. When you've finished, preview the result in the browser by selecting the Preview In Browser option