|
||
 |
||
|
| How To . . . Create An Image Map |
 Email This
 Print ThisView My Personal Library |
|
Step By Step April 2001 • Vol.7 Issue 4 Page(s) 80-81 in print issue |
How To . . . Create An Image Map | ||
 Imagine you decide to sell your house, and you want to create a Web site to show photos of the house as well give potential buyers other details, such as room measurements. One approach is to create a Web page with photos and related information about each room. How would people navigate to each of these pages? Text links such as "Bedroom #2" or "Downstairs Bathroom" don't seem as inviting or look as professional as an image map would. Or, imagine you are preparing a Web site for each department at your company. Each department will have its own Web page featuring products, services, phone numbers, and staff members that relate to that particular department. You could use a list of links on your company's home page to do this, but wouldn't it be more visually appealing to create an image map out of your company logo?  What An Image Map Is. An image map is nothing more than a graphic that includes various linked sections, called hot spots, that you can click to open another Web page. For the house example, your image map might include the graphic of a floor plan where visitors can click a room to display the page describing that room. For the company Web site, you might have an icon representing each department overlapping the outer edges of the company logo so visitors can click any icon to display that department's Web page. There are two types of image maps: server side and client side. Server-side maps use separate map files that have to be downloaded along with the Web page. They also depend on the server for translation. Client-side maps reside within the Web document and use the site visitors' browsers to perform the translation. All recent versions of Netscape Navigator and Microsoft Internet Explorer support client-side image maps. These image maps are also easier to create and maintain so we'll focus on these. The Creation Process. To see our simple image map in action, visit http://www.smart computing.com/learning/webtips/imagemap and click the various hot spots we linked to the graphic. As you'll notice, we chose to create an image map with a graphic of the continental United States to demonstrate what a company with five regional branch offices might do to link customers to the Web site for each branch office. Click anywhere on the image map and another browser window will open, telling you the nearest location of a branch office (New York, Chicago, Atlanta, Dallas, or Los Angeles) on a Web page with a different background color for each. Image map creation is a three-step process: 1. Create or find the appropriate graphic to use for the image map. 2. Map out hot spots by deciding which part of the graphic will correspond to each link you want to create. 3. Add the HTML (Hypertext Markup Language) code to support the map and the links. Image maps consist of plain HTML code; they don't require Java or JavaScript, and image maps run in almost any browser configuration. The only drawback of using image maps is it sometimes take longer to load their linked targets than text-based links take to load the pages they link to. Image maps work with any GIF (Graphics Interchange Format) or JPEG (Joint Photographic Experts Group) image. In other words, almost any image you can display on a Web page can be the foundation of an image map. However, there are a couple of things to consider. The most important consideration is that the underlying relationship between the image and the links must make sense. Users will immediately understand clicking a map to link to a destination or clicking a blueprint to see a room, but they may not understand that clicking the third floor of a building in a photograph will present them with information on the order-processing department that happens to be on that floor. Of course, you can provide instructions when needed, but you don't want to create a situation where explaining how to use an image map takes more instructions than just using text-based links. It is also important that the image have different areas that clearly belong to different links so the user understands where they are to click to link to more information. Mapping It Out. Once you have a suitable image, you must map various portions of that image to different links. You can do this by specifying a series of shapes and corresponding parameters. Our sample image map is divided into five regions: three rectangles, one circle, and one polygon. The coordinates for the rectangle region linked to Chicago are (221,65) to (570,281). The rectangle region linked to Atlanta is (416,281) to (655,515). The rectangle region linked to Los Angeles is (34,65) to (220,410). The circle region linked to Dallas has its center at (319,388) and extends out 145 pixels. The polygon region linked to New York starts and ends at (570,228) while moving through the points (735,75), (763,135), (702,281), and (570,281). To specify a rectangle, you look at the coordinates for the top left and bottom right points. For a circle, you consider the coordinates for the center followed by the radius. A polygon is a shape made up of straight lines. For this type of region, you look at the coordinates for each point. Polygons can have as many sides as you like; however, more than six is not very practical. Although it's not useful for our example, you can also specify a single point as a hot spot. Some important points to remember are: •When hot spots overlap, the first one specified is used. Look at the illustration of our image map; the circle for Dallas overlaps the areas for Chicago, Atlanta, and Los Angeles. Because we specified the area for Dallas after Chicago and Los Angeles, Dallas doesn't override their hot spots; it only overrides the hot spot for Atlanta. •Each are of the image map doesn't have to have a hot spot. If part of the image is not a hot spot, clicking it will have no effect. •You can direct a default link to display for all of the non-hot spot areas. This will make sure the entire image functions as a link, if that's what you want. Make sure you specify the default image last so it doesn't overwrite anything. There are a number of approaches you can use to get coordinates for the shapes, in addition to trial-and-error experimentation. In Windows 98 or newer, you can load GIF and JPEG images into Paint and move the cursor over the image to see the corresponding coordinates. With some browser versions, if you display an image and move the cursor over it, the coordinates appear on-screen. FrontPage, HoTMetal, and other HTML editors have tools you can use to automatically draw hot spots directly on an image. To link the image to each hot spot, these HTML editors ask for the URL (uniform resource locator; Web address) of the link and write the code for you. There are also a number of small utilities for both the PC and Macintosh, such as Mapedit ($25, free 30-day trial; http://www.boutell.com/mapedit), you can download to create hot spots by pointing and clicking as directed. Pulling It All Together. Once you have the image mapped, you are ready to pull it together on the Web page. You will have two sections of HTML code for each image map: one to store the map information and one to display the image. You can place these together, but you don't have to do this. The code for the Web page we created for our sample image map is below. The code that refers specifically to the image map is between the <map> and </map> tags. The line that begins with the first <map> tag gives a name for the map. This must be unique to this map and is referred to when the image loads to link the map to the image. <html> <head> <title> Image Map Example</title> </head> <body> <h1>Image Map Example</h1> <img src="USMap.jpg" border="0" usemap ="#USMap"> <map name="USMap"> <area shape="rect" alt="Chicago" coords ="221,65,570,281" href="3.html" title="Chicago" target="Message"> <area shape="rect" alt="Los Angeles" coords= "34,65,220,410" href="1.html" title="Los Angeles" target="Message"> <area shape="circle" alt="Dallas" coords= "319,388,145" href="2.html" title= "Dallas" target="Message"> <area shape="rect" alt="Atlanta" coords="416,281,655,515" href="4.html" title="Atlanta" target="Message"> <area shape="poly" alt= "New York" coords="570,228, 735,75,763,135,702,281, 570,281,570,228" href="5.html" title="New York" target= "Message"> <area shape="default" href="6.html" target="Message"> </map> </body> </html> Each hot spot is defined using an <area> tag. The shapes are "rect" (for rectangle), "poly" (for polygon), "circle", and "point" (although "point" isn't in our example). The parameters for each hot spot are listed after the Coords alternate. The Href alternate gives the file name, path, or URL to be used with a hot spot as a link. In our example, we only need to list the file name for each link because we decided to store those files in the same folder as the rest of our Web site files. And the Alt alternate specifies text that will display if you pause the mouse over a hot spot. This helps add text-based navigation to your image map. You can use all of the standard image-enhancing tags we used, substituting your file names, titles, values, and hot spot coordinates for ours (see the text shown in italics within the code above). Once you understand HTML code a little better, image maps become fairly easy to create and can add a visual punch to many types of Web sites.  by Ronny Richardson |
|
Home Copyright & Legal Information Privacy Policy Site Map Contact Us