ME39C: Multimedia Case Studies of Engineering Design

ME39C | Spring 1997 | Handouts & Lecture Notes | Client Side Image Maps

[ Spring 1997 | News | Class Home Pages | Facilities | On-Line Resources ]

Client Side Image Maps

We recommend you use Client Side Image Maps because it helps the people browsing your web pages "see" where the link takes them at the bottom of the browser window.

In order to use Client Side Image maps, you need to add an extra descriptor to the <IMG SRC> tag that says it is an image map (ISMAP) and which map to use (USEMAP).

Here's a sample. There is a hyperlink on top of the 1997 and one just above the E in Engineering. Because this is a client side image map, when you move your mouse over the 1997 you see that it will take you to http://www.synthesis.org and in over the other area it will take you to http://www.needs.org.



Called by: <IMG SRC="premier_banner.gif" ALIGN="BOTTOM" USEMAP="#premier_award" ISMAP BORDER="0">

In this example the "USEMAP=#premier_award" is telling the browser to search in this html file (because there is only a # sign, presumably you could have it look in another file in which case you would use "USEMAP=otherfile.html#premier_award") for a map with the name "premier_award".

Because the "premier_award" map name is specified, the browser will look for a <MAP NAME="premier_award"> in the html file.

The MAP looks like:

<MAP NAME="premier_award">
<AREA SHAPE="rect" COORDS="-1,62 108,99" HREF="http://www.synthesis.org">
<AREA SHAPE="poly" COORDS="9,7 66,37 127,32 19,7 " HREF="http://www.needs.org">
</MAP>

  • SHAPE can be rect, poly, circle
  • COORDS are the x,y coordinates. There are numerous programs available to help you figure out the coordinates.
  • You can have any number of AREA's
  • You can have any number of MAP's

Use your browser to view the source of this document and cut and paste the html listed below into your document. Then modify it with the correct shape, coordinates, HREF (URL), and map name.


[ Spring 1997 | News | Class Home Pages | Facilities | On-Line Resources ]


Last updated: 3/12/97
Send Comments to: Brandon Muramatsu
Copyright © 1997 Alice Agogino and Brandon Muramatsu.
All Rights Reserved.