Skip to main content.

Web Based Programming Tutorials

Homepage | Forum - Join the forum to discuss anything related to programming! | Programming Resources

How to use HTML 3.2

Chapter 12 -- Creating Clickable Images

Chapter 12

Creating Clickable Images


CONTENTS



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

  1. 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.

    Figure 12.2 :



  2. 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.
  3. 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.
  4. 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.

    Figure 12.3 :

  5. 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.

    Figure 12.4 :

  6. 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.
  7. Circles are defined by finding the coordinates of the circle's center and measuring the radius in pixels.
  8. 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

  1. 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.

    Figure 12.6 :

  2. Select the appropriate icon shape from the toolbar for the type of clickable region you want to define.

    Figure 12.7 :

  3. Click and drag the selec-tion marquee across the region. The status bar will display exact coordi-nate information.

    Figure 12.8 :

  4. Click on the arrow icon in the toolbar to select an existing area. Then double-click on the region you just defined.

    Figure 12.9 :

  5. 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

    Figure 12.10:

  6. Repeat steps 2-5 until all of the click-able regions in your image have been defined and associated with links.

    Figure 12.11:

  7. 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.

    Figure 12.12:

  8. 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.
  9. 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.

    Figure 12.13 :

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

  1. 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">.

    Figure 12.15 :

  2. 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.
  3. 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>.

    Figure 12.16 :

  4. You should also specify the height and width of your image inside the <IMG> tag using the HEIGHT and WIDTH attributes.

    Figure 12.17 :

  5. Close your link by typing </A>.

    Figure 12.18 :

  6. Save the edited HTML file by selecting Save from the File menu in Notepad.

    Figure 12.19:

  7. 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.