TCF389: Image Maps

• An image map is an image with hotspots on it that function like hypertext links. That is, click on a certain part of an image and you'll hyperlink on out of there.
• There are two types of image maps:
  1. Client-side image maps
  2. Server-side image maps
• Remember: client software runs on the machine sitting in front of you, while server software runs on a distant machine. Thus:
  • Image maps may either be controlled on the client side or on the server side of the interaction.
• DEMO: server-side image map:
  
  Note: As you move the cursor over it, you'll see the x and y coordinates signified in the status line (at the bottom of the browser).
  
  • x = horizontal, y = vertical
  • 0,0 = top left-hand corner of the image
  • 249,170 = 249 pixels to the right, and 170 pixels down
• When you click on part of the image, those coordinates are sent from the client to the server.
  • The server figures out what they mean, using a .map or .nvm file, a text file which looks like this:
    • ;Image=myhouseal.gif
    • circle http://www.tcf.ua.edu/DreamHome.htm 200,125 214,125
    • rect http://www.tcf.ua.edu/Hinton.htm 288,79 326,147
    • default http://www.tcf.ua.edu/default.htm
  • First line = name of image file
  • Other lines specify what should happen when a specific spot is clicked:
    1. First word indicates the shape of the hotspot--circle, rect(angle), or polygon (any multiple sided shape, in this case).
    2. Second is the link information.
    3. Third is the starting coordinate.
    4. Fourth is the ending coordinate.
  • The .map/.nvm file itself is linked to by a piece of HTML, for example:
    • <A HREF="myhouseal.map">
  • And the <IMG> tag is turned into an image map tag with one extra attribute: ISMAP. For example:
    • <IMG ISMAP SRC="myhouseal.gif">
• IMPORTANT:
  • Server-side image maps only function when actually on a Web server! You cannot test them locally
  • TCF Web server requires full URL in the links. You cannot just use filenames.
• Server-side image maps are slow and make the server work harder, so a new system was devised:
• DEMO: client-side image map
  
  Note: As you move the cursor over it, you'll see link destination in the status line:
  
• The client (e.g., Netscape Navigator) figures out where you want to go, using a chunk of HTML:
  • First is a fairly normal <IMG> tag, but it adds two new attributes (in red below): ISMAP and USEMAP
    • <IMG SRC="MyHouseAL.gif" WIDTH="400" HEIGHT="250" BORDER="0" ISMAP USEMAP="#MyHouseAL2">
  • ISMAP establishes that this is an image mape. And USEMAP sets up the name of the map after the # sign--"#MyHouseAL2", in the example above.
  • Then, the next few lines of HTML establish the mapping coordinates themselves, using the same name that the <USEMAP> attribute did in the <IMG> tag.
    1. <MAP NAME="MyHouseAL2">
       • <AREA SHAPE="RECT" HREF="hinton.htm" COORDS="287,79,325,147">
       • <AREA SHAPE="CIRCLE" HREF="dreamhome.htm" COORDS="200,127,21">
       • <AREA SHAPE="RECT" HREF="default.htm" COORDS="6,4,404,250">
    2. </MAP>
  • Much like the .map/.nvm files in a server-side image map, the (1) shape of the hotspot, (2) URL of the link, and (3) pixel coordinates are indicated--this time as attributes of the <AREA> tag.
• Unlike server-side image maps, client-side ones do not require full URLs and may be tested locally.
• The drawback? Not all browsers support client-side image maps.
• One should thus make both
• If a browser can use client-side maps, it will and it'll ignore the server-side part of it.

Sound complicated?

AOLpress to the rescue!

AOLpress will calculate x and y coordinates, automatically generate both .map/.nvm files, and create client-side HTML code. (Numerous other free and shareware programs do the same sort of thing.)

EXERCISE: Create an image map using AOLpress.

1. Get an image of a map of your house from Yahoo! Maps. (If you have trouble getting one, then just use my map above.)
2. Create a new page in AOLpress and insert your image in a page. (Incidentally, it may be either GIF or JPEG.)
3. Select that image (that is, highlight it).
4. Choosing  the Element Menu Image Map item opens the Image Map dialog below. You can resize the Image Map dialog to see more of your image.
   
5. Select a shape tool (for example, the circle tool) from the toolbar on the left and draw a shape on your image around your house.
6. In the Location field, type the link you want this shape to use. In this case, use the URL for your personal Web page.
   • For client-side image maps, the link can be any link you could normally use for linked text or images--for example, mypage.htm, http://www.tcf.ua.edu/, or mailto:myaddress@me.com. You can click the Browse button to search for a page you want to link to. (Remember, on TCF's Web servers, you must use the entire URL when you're doing a server-side image map.)

     If you type in the Location field when no shape is selected in the image, you will be asked if you want to create a default rectangle. The "default rectangle" lets you specify a link to follow when someone clicks on the image but not inside any of the other shapes you have drawn on the map.

7. When you've finished with one hotspot, press Enter or select another tool from the tool bar. Create a polygon hotspot and link it to something.
8. Move your cursor around the image. When your mouse moves over a shape, you will see a label that shows the location of the link. Where two shapes overlap, you see the location for the shape that is on top. You can use the Ordering tool in the toolbar to change which overlapping shape is on top--that is, which has top priority.
9. Use the button to save your image map. You will see the Image Map Save dialog.
   
   By default, AOLpress creates both a server-side map file for use on the AOL Web server (with an extension of .nvm) and client-side map information, which it stores in your page with the name you specify. You can uncheck one of the fields if you don't want to create both types of map files.
   • NOTE: Most Web servers, including TCF's, do not use the extension ".nvm." Instead, most use ".map." So, usually, you would want to change the Map File Name to something ending in ".map." When you do, AOLpress will display this error message:
     
     Ignore it and "Proceed"!
10. When you're finished, use the button to close the Image Map dialog and return to editing in AOLpress. You will be prompted to save any changes you have made.
11. FTP your image map materials to your TCF Web account and see if they work!

Toolbar Icons

Arrow: Use this tool to select an existing shape so that you can set a location, move, resize, delete, or change the stacking order of the shape.

Rectangle: Use this tool to create rectangular areas in your map. Then, type a location for that area. If you want to set a default location for all the parts of the image that don't have shapes, draw a rectangle around the entire image. Set the default location for this shape. Then, select the shape and use the "Ordering" tool to move this shape to the back.

Circle: Use this tool to create circular areas in your map. Then, type a location for that area.

Polygon: Use this tool to create multi-sided shapes in your map. Then, type a location for that area.

Delete Shape: Click this button to delete the currently selected shape.

Delete All Shapes: Click this button to delete all the shapes in the map.

Magnify: Click this button to zoom in and make the image appear larger.

Reduce: Click this button to zoom out and make the image appear smaller.

Ordering: Select a shape, then click this tool to select from a menu that lets you Bring to front, Bring forward (one layer), Send backward (one layer), or Send to back. If two shapes overlap, the link for the shape in front is used.

Help: Click this button for online help on making image maps.

You can see the .nvm file you create for server-side image maps in the MiniWeb view. If you delete an image map from a page (by highlighting it and pressing the Delete key), the actual image and image map files are not deleted. To delete the files, you can use File Delete or select and delete the files' icons in the MiniWeb view.

More About Creating an Image Map

Image maps contain three basic shapes: rectangles, circles and polygons. As you move your mouse across the image a little popup window appears telling you what link would be followed if the mouse were pressed there.

You add a rectangle by selecting the rectangle tool, then depressing the mouse on the image and dragging out a rectangle, and finally typing an URL into the location field.

You add a circle by selecting the circle tool, depressing the mouse on the image where you want the center to be and dragging out the radius, and again typing in an URL.

You add a polygon by selecting the polygon tool, and clicking out a series of points which define the polygon. You end the polygon by clicking on your starting point, or by double clicking, or by selecting the arrow tool. And again you should specify an URL.

If you did not get the shape quite right when you specified it, you may alter it later. If you select a shape (by clicking inside it with the arrow tool) you may drag it around to reposition it. Once a shape is selected you may also drag out one of the handles to resize it (you may constrain the resize by holding down the shift key). For polygons you may click on a point in the polygon and drag it around to reposition it.

You may delete a point from a polygon by selecting it (click on the point) and the pressing backspace or delete (or using the trash can tool). You may insert a point into a polygon by control-clicking on top of one of the lines of the polygon.

You may also adjust the shape with the arrow keys: Select the shape, handle or point which you wish to change and then press the arrow key. This changes the selected thing by one pixel in the obvious direction.

Selecting a shape and pressing backspace, delete or using the trash tool will delete that shape.

You may magnify an image by pressing the big picture of the mountains. You may reduce the image by pressing the little picture. The text underneath says what the current magnification is.

If you have a complex map you may have several shapes overlapping each other. The shape that is actually invoked when you click in an overlapped region depends on the creation order, the most recently created shape is hit first. You may adjust this by selecting a shape and hitting the menu button which gives you a popup with Bring to front, Bring forward, Send backward, and Send to back options.

Keyboard Shortcuts

backspace & delete

Delete the currently selected object

tab & return

Moves the focus between the URL field and the image

Next or Page Down

Selects the next shape in the list of shapes.

Prev or Page Up

Selects the previous shape in the list of shapes.

Control-Next (Page Down)

Selects the next point in the current shape.

Control-Prev (Page Up)

Selects the previous point in the current shape.

Control-Home

Moves the currently selected thing up one in the list.

Home

Moves the currently selected thing to the top of the list.

Control-End

Moves the currently selected thing up one in the list.

End

Moves the currently selected thing to the bottom of the list.

Arrow keys

Move the currently selected shape or point one pixel in the obvious direction. If a handle is selected the shape is resized by one pixel in the obvious direction (this is not a good way to resize polygons).

Control-E

Expands (magnifies) the image.

Control-R

Reduces the image.

Control-S

Saves the image

Control-Q

Closes the window.