|
An Image Map is simply a menu in graphical form. Areas of an image map graphic are "mapped" with linkages to parts of a Web site or other URLs. When you point your mouse and click on a portion of an image map, the coordinates you selected are translated into a destination based on information stored in a related map file. All you need to create an image map is a *.gif or *.jpg image and one of the many image mapping programs available for the Windows environment.
|
Every image map has two parts: the image itself and a map file. The map file can be either included on the page with the rest of your HTML or can be a separate file. (Our demo uses both a Client Side Image Map and a server side map and includes both an embedded map file and a stand alone map file. The image can be in either .gif or .jpg format.
There are several popular image map formats used on the World Wide Web. Prodigy's Personal Web Pages server supports Client Side Image Maps and the NCSA format server side image maps.
When you create an image map, a special map file or specific HTML is created to store coordinates you designate to correspond to specific linkages. If you create a separate map file, it needs to be uploaded and stored in your Personal Web Pages directory along with the page containing the image map to which it relates. When a visitor clicks on your image map, the Personal Web Pages server accesses the map file you referenced, retrieves the necessary information and passes the related URL or destination to the visitor's Web browser.
|
In simple terms, a Client Side Image Map uses the built in capabilities of some web browsers (such as the PRODIGY Web Browser) as an engine to translate the coordinates and request the referred URL or file. A Server Side Image Map (such as the NCSA format supported by the servers used for Personal Web Pages) must send a request to the remote server and use the capabilities of the remote server to request the URL or file referenced by the map coordinates. Client Side Image Maps can be faster than Server Side Image Maps because they do not depend on the CPU load on the server. |
Several easy-to-use programs are available to assist you in creating image maps.
Both Mapedit and MapThis can create Client Side and Server Side Image Maps.
Windows 3.1x users may want to try out both MapEdit and Web Hotspots. Both are shareware programs that you should register if you intend to keep using them.
Windows 95 or Win 3.1x users who have installed Win32s version 1.25 or later will want to try the 32-bit freeware program MapThis!
If you view the source for this page, you'll see that we've included the Client Side Image Map as part of this page's HTML code.
Client Side Image Maps can either be separate *.htm or *.html files or can be embedded on a page with other code (such as our sample here).
<MAP NAME="MapDemo"> <AREA SHAPE=CIRCLE COORDS="60,106,37" HREF=http://galadriel.ecaetc.ohio-state.edu/tc/mt ALT="this is the URL for MapThis 32 Bit"> <AREA SHAPE=RECT COORDS="111,66,190,144" HREF=ftp://sunsite.unc.edu/pub/packages/infosystems/WWW/tools/mapedit/mapedit.zip ALT="This is the FTP site for MapEdit"> <AREA SHAPE=POLY COORDS="199,70,210,77,215,61,227,67,265,57,264,81,297,105,273,115,262,157,224,135,203,144,208,117,201,94,210,87,199,70,199,70" HREF=#Hotspots ALT="This is the link to the bookmark for HotSpots"> <AREA SHAPE=default HREF=http://pages.prodigy.com/beta/imagemap.htm> </MAP> |
Any of the recommended image mapping programs can create an NCSA format map file like the sample below.
default http://pages.prodigy.com/imagemap.htm rect http://pages.prodigy.com/imagemap.htm#Hotspots 206,62 269,128 rect http://galadriel.ecaetc.ohio-state.edu/tc/mt 28,66 101,135 rect ftp://sunsite.unc.edu/pub/packages/infosystems/WWW/tools/mapedit/mapedit.zip 115,65 194,136 |
In our sample on this page, we've used BOTH a Client Side Image Map and a server side map. This insures that visitors to this page will be able to select the hotspots in our sample map even if the browser they are using doesn't have Client Side Image Map capabilities.
Browsers which include the capability to use a Client Side Image Map will use the client side coordinates first and ignore the server side reference. Other browsers will use the NCSA format image map reference. Once your map file is ready, you'll need to insert an image map reference (or references) on your page. Here's how the reference for the sample map on this page is constructed:
| <A HREF="map2.map"><IMG SRC="mapdemo.gif" ISMAP USEMAP="#MapDemo" HEIGHT=211 WIDTH=316 ALIGN=TOP BORDER=0 ALT="Image for Map Tutorial"></A> |
HTML Hints
A Client Side Image Map is designated in HTML markup language by USEMAP while a server side (in this case NCSA) map is designated by ISMAP.
Relative links to the map name for the NCSA map file (map2.map) and the image file (mapdemo.gif) are used because the image file, the map file and this page are all in the same directory. (Of course, relative links specify a location 'relative' to where you are. Since you're linking to files within your own directory, you don't need the whole "http://etc..." path, just the filenames.)
It's always a good idea to use width= and height= tags whenever you include an image on your Web page. Your page will load faster because the browser can "reserve" space for the image, formatting the incoming text properly without waiting for the image to download first.
We've used the ALT= tag to tell visitors without graphical browsers, as well as those who have turned image loading off, that there is an image map on this page. And we've also specified BORDER=0 so no border will appear around the edges of our sample map.