Creating an image map

You can divide an image into multiple parts and link the parts (called hotspots) to different pages in your Web site. When you create an image map, you link different parts of the image to separate destinations.

You can create client-side image maps and server-side image maps. Client-side image maps are easy to implement, because they eliminate the need for a CGI script, which is required by server-side image maps, and they may perform faster because of the reduced demand on the server processor. However, some older browsers such as Mosaic and earlier versions of Internet Explorer and Netscape Navigator do not support the client-side image map.

If you want to accommodate people who have newer browsers and those who have older browsers, you might consider creating both a client-side and a server-side version of each image map on your Web site. You also might consider using several individual images as links instead of an image map.

To create either kind of image map, you need to assign hotspots to the image. Hotspots are hypertext areas on an image map that people can click to jump to different URLs.

Creating a client-side image map

When you create a client-side image map, you draw hotspots over parts of the image and link them to pages or URLs. You can make the areas of an image that aren't covered by hotspots link to a default URL. When someone clicks on the image map but doesn't click on a particular hotspot, the default link is activated.

To create a client-side image map:

1. Select the image and choose Object Editor from the View menu (Windows) or Show Object Editor from the Window menu (Macintosh).
   
2. Click the Behavior tab, if necessary.
   
3. Click the Image Map radio button, and then click the Edit button.
   
   The image file opens in the Image Map Editor.
   
4. Use the Zoom pop-up menu to increase the magnification of the image.
   
5. Select the Rectangular Link or the Circular Link tool on the toolbar and draw a rectangle or circle over the area of the image that you want to be a hotspot.
   
   When you are finished creating the hotspot, the Link Editor appears.
   
6. Type the filename or URL of the link destination in the URL text box or choose it from the URL pop-up menu.
   

   

   

    

7. Repeat steps 5 and 6 to create other hotspots in the image.
   
   Claris Home Page consecutively numbers each hotspot as you draw it, with smaller-numbered hotspots in front.
   
   Note If you draw hotspots that overlap each other, hotspots in front take precedence over the ones in back. Use the Move Link buttons to change the order that layered hotspots are used.
   
8. For areas that aren't covered by a hotspot, type a URL in the Default URL text box or choose it from the Default URL pop-up menu
   
9. Close the Link Editor and the Image Map Editor.
   

To remove all hotspots and destination URLs from an image map:

1. Select the image.
   
2. Choose Object Editor from the View menu (Windows) or Show Object Editor from the Window menu (Macintosh).
   
3. Click Clear.

Creating a server-side image map

It is useful to provide server-side image maps for members of your Web audience who may have old browsers. Making a server-side image map work requires an available CGI image map program or equivalent software supported by your Web server. You must also choose what type of server-side image map is supported by your Web server or Internet service provider, NCSA or CERN.

To set the type of server-side image maps you create:

1. Choose Application Options from the Tools menu (Windows) or Preferences from the Edit menu (Macintosh).
   
2. Choose the Images tab, if necessary.
   
3. Set the Image Map Format option to NCSA or CERN.
   
4. Click OK.
   

To create a server-side image map:

1. Select the image and choose Object Editor from the View menu (Windows) or Show Object Editor from the Window menu (Macintosh).
   
2. Click the Behavior tab, if necessary.
   
3. Click the Image Map radio button, and then click the Edit button..
   
   The image file opens in the Image Map Editor.
   
4. Click the Create Server Side Image Map check box.
   
5. Use the Zoom pop-up menu to increase the magnification of the image.
   
6. Select the Rectangular Link and the Circular Link tools to draw hotspots in the image.
   
   The Link Editor appears for every hotspot you draw.
   
7. In the Link Editor, Type the filename or URL for each hotspot link destination in the URL text box.
   
   To specify a default URL for the image map, type the URL in the Default URL text box or choose the URL from the pop-up menu next to the Default URL text box.
   
   Claris Home Page consecutively numbers each hotspot as you draw it, with smaller-numbered hotspots in front.
   
   Note If you draw hotspots that overlap each other, hotspots in front take precedence over the ones in back. Use the Move Link buttons to change the order that layered hotspots are used.
   
8. Save your image map file by choosing Save from the File menu, and then close the Image Map Object Editor.
   
   The image map file is named the same as the image file except that the extension is .map instead of .jpg or .gif. This map file is created in the same folder as the image file.
   
9. With the image still selected in your page, choose Link to URL from the Insert menu or click the Link Editor button on the toolbar.
   
   The Link Editor appears.
   
10. For most ISPs, you will need to type the pathname of the image- handling script and map file name in the URL text box.
    
    Depending on your ISP, you may type something like this for a CGI called "imagemap" and an image file called "picture.gif," which would have a map file called, "picture.map":
    
    /cgi-bin/imagemap/~myfiles/images/picture.map
    
    Note Check with your ISP for the format of this link.
    
11. Close the Link Editor.
    
12. Save your Web page.
    

Important Talk to your Web server administrator or Internet service provider to get the Web server requirements for using a server-side image map. Some Web server software may have built-in image map support, and not require an additional CGI, though they still may require either a NCSA or CERN image map format. Other servers may require a special file name extension for the map file other than the .map extension that Claris Home Page creates.

For more information on server-side image map issues, see http:// www.claris.com/support/products/clarispage/.

To remove all hotspots and destination URLs from an image, select the image, open the Image Map Object Editor, and click Clear.

You can test the image map links in Preview Page mode. For more information, see Testing the links.