Gary L. Simmons  rev 08/06/04  webwonks.org/WebBuilding/ImageMaps.html
Home  Marathon  Joke OT Weak  Web Building  Resumé  Lynx  Hobbies  Extra  Site Map Resume Joke of the Weak go to next department

Gary's Web Building

Building Image Maps

Not only can you make a graphic a link, you can create a graphic that has multiple links or "hot spots" on it. I used to have a large image map on my home page but have since changed the format of that page.To be a reference for this tutorial, I have brought over the image map I once used on the home page. It is at the bottom of this page. If you pass your mouse over the large graphic on that page you will notice that your mouse pointer will turn into a hand denoting that it is a link. If you   look at your status bar link navigation text at the bottom of your browser window, you will see a different URLappear in it as the mouse passes over different sections of the picture. Click on any portion of the image that displays a URL and you will go to that page. This is an image map, the effect is created with HTML tags and or text files and scripts on the server. The graphic itself is an ordinary graphic that just serves as a visual aid to the user for the pixel coordinates of a link. Here is how to do it yourself.

  • Image map flavors:

    There are two kinds of image maps, client side image maps and server side. The client side map coordinates and URL info are right in the HTML document. The browser on your machine will do the work of putting the pieces together. Server side image maps are processed by the hardware and software that serves your web site. Client side image maps are a little newer technology so not all versions of all browsers supports it. NetScape Navigator 1.0 and Internet Explorer 2.0 do not support client side image maps. Neither do some experimental or "obscure" browsers. However this is a very small portion of the current browsers out there.

  • Image mapping tools:

    This tutorial walks you through creating an image map by hand but there are many tools out there that will automate this process for you. Most WYSIWYG page authoring applications such as Dreamweaver have image mapping tools. You can also create image maps in Macromedia's Fireworks or Adobe ImageReady. There are some image mapping tools available online, if you are using Windows OR a Mac or even Unix and Linux there is a image map making tool available for download by Tom Boutell called MapEdit.

  • Doing it by hand:

    You need 3 things to create an image map by hand, a (GIF, JPEG or PNG) graphic, a graphics program that will display the exact X Y coordinates of your curser when poised over your graphic (Photoshop's info palette or GraphicConverter's Picture/Show Position work great) and a text editor for writing the HTML. There are 4 shapes that you can use to describe an area:

    RECTANGLE - (abv. to RECT) Upper left X Y and lower right X Y coordinates of the rectangle. EX: COORDS="X1,Y1,X2,Y2" where X1,Y1 defines upper left coordinate of rectangle and X2,Y2 defines lower right coordinates of the rectangle.

    CIRCLE - (abv. to CIRC) For a circle the coordinates are the circle center X and Y coordinates as well as a third number that corresponds to the radius as the number of pixels to the edge of the circle.

    POLY - For a polygon of at most 100 vertices. A vertex is a set of X and Y coordinates.

    POINT - A single X Y coordinate. If you have 2 points whichever you are closest to when you click is selected.


  • Getting started:

    Your first step would be to determine which of the above shapes are best suited to each area of your image map then go into your graphics editor and jot down the pixel coordinates you would need for each shape. Next your HTML code will describe the area over your graphic and assign a local or full URL to it. This is from my home page HTML, so therefore, this is a client side image map:

    < HTML>
    < HEAD><TITLE>Building Image Maps</TITLE></HEAD>
    < BODY>

    < MAP NAME="IndexImageMap1">

    < AREA SHAPE="rect"
    COORDS="203,187,309,282"
    HREF="../Resume/Resume.html">

    < AREA SHAPE="rect"
    COORDS="0,0,203,282"
    HREF="../JOTW/JokeOfTheWeak.html">

    < AREA SHAPE="poly"
    COORDS="204,0,204,187,308,187,308,257,409,257,409,0"
    HREF="../WebBuilding/WebBuilding.html">

    < AREA SHAPE="poly"
    COORDS="248,282,248,509,409,509,409,258,309,258,309,282"
    HREF="../Marathon/Marathon.html">

    < AREA SHAPE="rect"
    COORDS="0,281,248,511"
    HREF="../Lynx/Lynx.html">

    < AREA SHAPE="rect"
    COORDS="165,513,410,694"
    HREF="../Hobbies/Hobbies.html">

    < AREA SHAPE="rect"
    COORDS="0,513,164,694"
    HREF="../Extra/Extra.html">

    < /MAP>

    < IMG SRC="images/IndexImageMap.jpg" align="BOTTOM" border="0" USEMAP="#IndexImageMap1" ISMAP alt="Image Map O Doom" width="410" height="693" naturalsizeflag="3">

    < /BODY>
    < /HTML>


    Where:
    • MAP NAME - Ties map name to coordinates and URLs. You can use any name you want, but keep it similar to the map graphics file name for simplicity sake.
    • AREA SHAPE - defines format of coordinates for the browser to read.
    • HREF - The URL a particular set of coordinates point to.
    • IMG SRC - Path/filename of map graphic.
    • USEMAP - Refers path/filename back to coordinate definitions.
    • ISMAP - Defines the image as an image map.

  • To create a server side image map:

    Create a text file in the /cgi-bin/imagemap directory on the server as the image file you will map having the form of ImageMapFileName.map. (This is a typical configuration however, you should follow your server administrator's instructions) In this text file you define the area shapes like this:
    default ../WebBuilding/ImageMap.html
    rect ../Hobbies/Hobbies.html 165,513,410,694
    rect ../Extra/Extra.html 0,513,164,694
    rect ../Lynx/Lynx.html 0,281,248,511
    poly ../Marathon/Marathon.html 248,282,248,509,409,509,409,258,309,258,309,282
    poly ../WebBuilding/WebBuilding.html 204,0,204,187,308,187,308,257,409,257,409,0
    rect ../Resume/Resume.html 203,187,309,282
    rect ../JOTW/JokeOfTheWeak.html 0,0,203,282


    Where:

    default - establishes the default URL that the browser will display if you click outside of the areas you define. Set this to the current document if you want the impression that the click had no effect.

    rect, poly, circ - coordinates may vary from server to server but is generally the same as the client side coordinates. Contact your server administrator for exact instructions.

    Your HTML will look something like this:

    < HTML>
    < HEAD><TITLE>Building Image Maps</TITLE></HEAD>
    < BODY>
    < A HREF="/cgi-bin/imagemap/IndexImageMap.map">
    < IMG SRC="images/IndexImageMap.jpg" ISMAP></A>
    < /BODY>
    < /HTML>


    The anchor tag links the graphic to the map definition file (IndexImageMap.map). The ISMAP attribute tells the browser that the graphic is an image map.

  • The last word:

    Provide a redundant set of regular text HTML links on the page. The user may not be able to view graphics or has his graphics turned off. This way all will be able to navigate your site. You also want to keep in mind that large image map files will slow the loading of the page. That is one of the reasons I removed the image map you see below from the home page. Tis a shame too, because I really love the graphics in it.

Top of page

Below is the old image map from the now redesigned home page for you to use as a reference.

Click on a subject in the picture
Resume Joke of the Weak Web Building Marathon Links Hobbies Extra Image Map O Doom

Top of Page
Back to Web Building