- How to Create a Clickable Image
- How to Define an Image Map in HTML
If you've experimented with images and links, which you learned about in previous chapters, you've probably already discovered that you can use an image to create a hyperlink to another HTML document. But what about using a single image to link to several different documents? It can be done using clickable images, also known as image maps.
When you use a clickable image map, the user clicks on a part of the image. The server records the coordinates of the part that was clicked, and your image map directs the server to process a hyperlink accordingly.
You've probably seen image maps on a lot of Web sites that you have visited. Image maps are an excellent way to visually present links in an intuitive and friendly fashion. Creating your own image maps isn't hard to do, but it requires some careful preparation. In this chapter you'll learn how to create and prepare image maps for use with your own HTML documents.
How to Create a Clickable Image
The first part of building a clickable image map is creating the image to be used. Your image should be simple and easy to understand, with clearly delineated sections.
Tip Sheet
- If you use a clickable image map in your HTML documents, keep in mind that users with text-only browsers will be left out in the cold. It's always a good idea to provide text-only versions of any documents that use a clickable image map.
- Create your clickable image using Paint Shop Pro or another image editing program that can save files in GIF or JPEG format. In this ex-ample, we'll use a button bar.
- When creating an image map, make the actual image as simple to understand as possible. You should always try to place text in the image to help your readers understand which sections of the image to click. Photographs and other images that lack clearly defined sections are usually poor choices for image maps.
- Plan out in advance the different sections of your image map and where their associated links will point. Making substantial changes to images is always time-consuming and difficult, so you'll want to account for all the possibilities before you create your image.
- Sketch out the pixel boundaries of all the various sections. Your clickable sections can be rectangles, circles, or polygons. You can also define single pixels as regions, but this is discouraged.
- In our button bar example, all of the clickable regions are rectangles, which makes things easy. Rectangles are measured using two sets of coordinates: the upper-left corner and the lower-right corner.
- Polygons are defined by supplying the coordinates of all the corners. For example, to define a triangle, you would need to supply three sets of coordinates.
- Circles are defined by finding the coordinates of the circle's center and measuring the radius in pixels.
- Once you've finished creating or editing your image, save it in GIF or JPEG format.
How to Create a Map File
The second part of building a clickable image map is creating the map file. This text file contains a list of coordinates that form the map regions. Each clickable region has an associated hyperlink. The Web server reads the map file to match the coordinates of the pixel that was clicked by the user, and then determines which hyperlink to send the user to.
You can find the latest version of Map This! by pointing your Web browser to http://galadriel.ecaetc.ohio-state.edu/tc/mt.
Tip Sheet
- You can test out your map file by choosing Test Map from the Goodies menu. This allows you to see what links will be activated when certain parts of the image are clicked on by the user.
- You can use the image magnification tools on the toolbar to zoom in on the image. This gives you greater precision when defining the clickable regions for your image.
- If you have a large number of click-able regions defined, using the Area List window will help you track and select them. Choose Area List from the View menu to display a separate window which lists all of your defined regions.
- Start Map This! and select New from the File menu. You'll be prompted to locate an image to use for the map. Open your existing GIF or JPEG file.
- Select the appropriate icon shape from the toolbar for the type of clickable region you want to define.
- Click and drag the selec-tion marquee across the region. The status bar will display exact coordi-nate information.
- Click on the arrow icon in the toolbar to select an existing area. Then double-click on the region you just defined.
- In the Area Settings dialog box, specify the URL of the item that this region should link to. For example, to link to an HTML document named about.html in a subdirectory called info/, type info/about.html. For more information on URLs and links, refer back to Chapter 6
- Repeat steps 2-5 until all of the click-able regions in your image have been defined and associated with links.
- When you're finished defining clickable re-gions, choose Save As from the File menu. You'll be prompted to fill out the Info dialog box. Type in a title for your Map file and put your name in the Author field. The de-fault URL is used when the user clicks on a part of the image that is not defined by one of your regions. You should also supply a brief description of what your map file does.
- Repeat steps 2-5 until all of the clickable re-gions in your image have been defined and associated with links.The last item in the Info dialog box is the map file format. Different Web servers recognize different image map file formats. The default format is NCSA, which is the most widely used. You should check with your server administrator to see which format you need to select.
- Click on the OK button. Then, choose a file name for your map file. Your file should have the extension .map. Click on the Save button when you're finished.
How to Define an Image Map in HTML
The last thing you need to do to create an image map is to place it on your Web server and place a reference to it in your HTML document.
An image map works just like a CGI script, and usually belongs in the same directory as scripts on your server. Consult your Web server administrator for details on how to upload your completed map file to the appropriate directory. The actual image can be placed anywhere you like, although it's generally a good idea to place it in the same directory as your HTML document.
Tip Sheet
- For more information on hyperlinks, refer back to Chapter 6.
- Turning images into hyperlinks usually causes a blue border to be displayed around the image. To turn the border off, type BORDER=0 inside the <IMG> tag.
- Open your HTML document in Notepad, and position the cursor where you'd like to place the image map. An image map is placed into HTML as a hyperlink. Type <A HREF=""> and insert the name of your map file inside the quotation marks. For example, if your map file is named buttons.map and is located in the cgi-bin directory on your server, you would type <A HREF="cgi-bin/buttons.map">.
- Some Web servers handle image maps differently than normal CGI scripts. Be sure to check with your server administrator for exact instructions on how to link to your image map.
- Now you need to include a reference to the actual image, with one important attribute specified. Image map graphics need to include the attribute ISMAP inside the <IMG> tag. For example, to include the image buttons.gif as an image map graphic, type <IMG SRC="buttons.gif" ISMAP>.
- You should also specify the height and width of your image inside the <IMG> tag using the HEIGHT and WIDTH attributes.
- Close your link by typing </A>.
- Save the edited HTML file by selecting Save from the File menu in Notepad.
- Unfortunately, you can't test out an image map on a local machine. You'll need to upload everything to your Web server before you can fully test your image map. See the Appendix for more information on transferring files to your Web server.
|
