Creating Client-Side Image Maps
Image maps are used as navigational devices on many Web sites. In general, an image map is a graphic that is divided into regions (e.g., you could divide a circle into four equal parts, much like you would a pie). Each region, in turn, is linked to a particular URL. When you click your mouse on a particular region of the graphic, your browser opens that URL.
There are two types of image maps: server-side image maps and client-side image maps. As the name implies, a server-side image map uses the server (the computer hosting a particular Web site) to direct your browser to the URLs defined by the image map. In contrast, a client-side image map uses the browser to determine which URL should be opened when you click on a particular region of the image map with your mouse. Both approaches are functionally equivalent with third-generation browsers and above. Because you do not need access to the server to create client-side image maps, they are usually easier to create.
Example: An Unattractive, but Simple Client-Side Image Map
<MAP NAME="menu"> <AREA SHAPE=RECT COORDS="4,4,96,36" HREF="home.cfm" > <AREA SHAPE=POLY COORDS="5,39,95,104,95,39,5,39" HREF="fun.cfm"> <AREA SHAPE=POLY COORDS="4,44,95,113,6,114,4,44" HREF="games.cfm"> <AREA SHAPE=CIRCLE COORDS="51,164,36" HREF="work.cfm"> <AREA SHAPE=RECT COORDS="16,215,89,284" HREF="play.cfm"> <AREA SHAPE=DEFAULT HREF="main.cfm"> </MAP> <IMG USEMAP="#menu" SRC="graphics/image_map_example.jpg" HEIGHT="300" WIDTH="100" border= 0">
The key elements of a client-side image map are:
- the <MAP> and </MAP> tags, which must surround the image map code
- the NAME attribute of the <MAP> tag, which specifies the name of the map so that it can be linked to an image file (see below)
- the <AREA> tag, with its parameters SHAPE, COORDS, and HREF
- the USEMAP attribute in the <IMG> tag, which indicates which map code should be used in conjunction with the image.
The <AREA> tag allows you to define the size and shape of the region on the image that you wish to link to a particular URL. The SHAPE parameter can take the values RECT (rectangle), CIRCLE (circle), POLY (polygon), and DEFAULT (the area left over on the image after you've defined the other regions). Each of these values, with the exception of DEFAULT, is defined using the COORDS attribute, using specific pixel locations measured from the upper left corner of the image. These pixel locations are represented using x,y coordinates (horizontal and vertical distances, respectively, in pixels from the upper left corner of the image). (Now it's time to remember your junior high algebra. Remember how your teacher told you it would come in handy one day?)
- RECT is defined using the upper left corner and lower right corner of the rectangular region: x,y,x,y. For an example, view the code listed above.
- CIRCLE is described using a single x,y coordinate value for the center of the circle, and a second single value for the radius of the circle. For example, view the coordinates of the circular region in the image map above.
- POLY is defined using the first corner of the polygon, each subsequent corner, and ending with the last corner (which is identical to the first). There are always one more set of coordinates for a polygon than there are corners. For example, the two triangular regions described above using the POLY attribute have four sets of x,y coordinates, with the first and last set of x,y coordinates being identical.
- The HREF attribute, simply enough, specifies the URL your browser will open when you click with your mouse on the region.
Complicating Things: Targeting Your Links and Using the onMouseOver Event
If you are using an image map to target links in a framed Web site, you can add the TARGET attribute to the <AREA> tag. You can also cause a message to be displayed in the status bar (usually located at the bottom of your browser window) or as an informational flag when you pass the mouse cursor over a particular region. The following example shows how you can add these attributes to your <AREA> tags.
<MAP NAME="menu2"> <AREA SHAPE=RECT COORDS="4,4,96,36" HREF="home.cfm" TARGET="pop" onMouseOver="self.status= 'Return to My Home Page'; return true"> <AREA SHAPE=POLY COORDS="5,39,95,104,95,39,5,39" HREF="fun.cfm" TARGET="pop" onMouseOver="self.status= 'Shall we have some fun?'; return true"> <AREA SHAPE=POLY COORDS="4,44,95,113,6,114,4,44" HREF="games.cfm" TARGET="pop" onMouseOver="self.status='Bring on the games!'; return true"> <AREA SHAPE=CIRCLE COORDS="51,164,36" HREF="work.cfm" TARGET= "pop" onMouseOver="self.status='Then again, come Monday, we have to go to work.'; return true"> <AREA SHAPE=RECT COORDS="16,215,89,284" HREF="play.cfm"" TARGET="pop" onMouseOver="self.status='But, come Saturday, we get to play.'; return true">< AREA SHAPE=default href="main.cfm" onMouseOver="self.status=''; return true"> </MAP> <IMG USEMAP="#menu2" SRC="graphics/image_map_example.jpg" HEIGHT="300" WIDTH="100" border= "0" alt="Image Map Demo 2" Title="A Second Image Map Example, Using the onMouseOver Event">
You'll notice that the TARGET attribute works in the same way it does with any other links that target frames. You can use the default values of _top, _blank, _self, and _parent as well as the names of specific frames on your site. The onMouseOver attribute (actually, it's a dynamic HTML value that we'll talk about later in this course, but thinking of it as an attribute will work well enough for now) allows you to display a message in the status bar. Without this message, the URL displays in the status bar. (To check this out, compare the messages you get with the simple and more complicated examples.) Using the onMouseOver attribute involves careful attention to syntax. The double and single quotation marks need to be in place (see the example above) and you need to use self.status and return true in each statement.
Tools for Creating Image Maps
You can create image maps using a variety of tools. Some programs, like LiveImage, are standalone programs that create the code automatically for you. You can also use Web-based applications, like MapMaker, to generate code for your image map. In general, stand-alone programs are usually the best way to go. They're faster, since they run on your own computer rather than over the Web, and they typically offer a greater degree of control over the placement of your regions. They also allow you to open and edit maps that you've created before.
 |
|