How to make an imagemap - Client-Side Imagemaps
Home: Graphic Academy
Graphics Books
Graphics File Formats
  Animation File Formats
Bitmap File Formats
CAD File Formats
Cursor File Formats
Font File Formats
Icon File Formats
Metafile File Formats
Prepress File Formats
Vector File Formats
Video File Formats
Web File Formats
More Graphics File Formats
Graphics Software
  Banner Design Software
CAD Software
Diagram Drawing Software
Illustration Software
Photo Editing Software
Video Conversion Software
More Graphics Software
Graphics Tutorials
  • Adobe Dreamweaver Tutorials
  • Adobe Photoshop Tutorials
  • AutoCAD Tutorials
  • How To Draw Tutorials
    Banner Design Tutorial
    Banner Display Tutorial
    Color Combinations Tutorial
    Color-Safe Conversion Tutorial
    eBook Covers Tutorial
    Favicon Tutorial
    GIF + Photo Tutorial
    Good Web Design
    Image Slice Tutorial
    Image Tiling Tutorial
    Imagemap Tutorial
    Photography Tutorial
    Prevent Copying Tutorial
    Screenshots Tutorial
    Should I Use Flash?
    Text to Images Tutorial
    Web Image File Formats
    More Graphics Tutorials
    Graphics Glossary

      >  Tutorials  >  Make An Imagemap  >  Chapter 2



    How To Make An Imagemap

    Chapter 2: Client-Side Imagemaps

    Client-Side imagemaps are processed entirely in the user's browser, are coded using just plain HTML, and what's more can give visual cues to the user as he moves the mouse over them.

    Below is an actual working imagemap (assuming you have a JavaScript enabled web browser). Move the mouse over the different colored regions, and try clicking on them too, to see it working.

    A Client-Server Imagemap
    (Actually works!)
    Red Green Blue

    Here is the actual exact HTML code that was used to produce this imagemap:
    (If you're not familiar with HTML or just want to learn more, then get yourself a good HTML Tutorial).

    <IMG SRC="imagemap.gif" USEMAP="#mapname" WIDTH="250" HEIGHT="250" BORDER="1">
    <MAP NAME="mapname">
    <AREA SHAPE="rect" COORDS="25,25,74,74" HREF="javascript:alert('You clicked on Red');" ALT="Red">
    <AREA SHAPE="poly" COORDS="75,25,124,25,124,124,25,124,25,75,75,75" HREF="javascript:alert('You clicked on Green');" ALT="Green">
    <AREA SHAPE="circle" COORDS="174,174,50" HREF="javascript:alert('You clicked on Blue');" ALT="Blue">

    Now this example uses JavaScript to display various messages when you click, so for simplicity sake, let's look at what the HTML code would look like, for one that simply linked each region to a different web page:

    <IMG SRC="imagemap.gif" USEMAP="#mapname" WIDTH="250" HEIGHT="250" BORDER="1">
    <MAP NAME="mapname">
    <AREA SHAPE="rect" COORDS="25,25,74,74" HREF="red.html" ALT="Red">
    <AREA SHAPE="poly" COORDS="75,25,124,25,124,124,25,124,25,75,75,75" HREF="green.html" ALT="Green">
    <AREA SHAPE="circle" COORDS="174,174,50" HREF="blue.html" ALT="Blue">

    Let's run through the code quickly:
    • The first thing to note is the USEMAP attribute in the IMG tag. In here, I tell the browser which MAP to use for that image. I need to do that because a single HTML page could contain more than one imagemap.

    • Next, the MAP tag. You should notice that the NAME attribute matches the earlier USEMAP attribute.

    • Within the MAP tag, I give the coordinates of each clickable region within the image, using the AREA tags:

      • The SHAPE can be rect (or rectangle), to define a rectangular region. In this case, COORDS has four numbers, the top left X,Y coordinate, and the bottom right X,Y coordinate of the rectangle.

      • The SHAPE can be poly (or polygon), to define a polygon region. In this case, COORDS can contain as many pairs of X,Y coordinates as I like, each pair giving the X,Y coordinate of one of the polygon's vertices.

      • The SHAPE can also be circle. In this case, COORDS gives the X,Y coordinate of the center, followed by the radius of the circle.

      • Although not shown in the above example, I can also create "holes" in regions where a click performs no action. I can do this by substituting NOHREF for HREF="...etc..."

      • Also not shown in this example is what happens if two regions overlap. In this case, the first AREA covering a particular coordinate takes precedence.

      • Finally it is worth noting that two or more AREAs can share the same HREF destination. This allows you to create maps with composite shapes or non-contiguous regions. For example, if I presented a map of North America, I might make the 48 contiguous states one polygonal region with the destination usa.html, and Alaska a separate polygonal region also with a destination of usa.html.
    So now you know the technical details of creating imagemaps in HTML - but how do you know the coordinates?

    The traditional way is to open the image into a paint program and try to trace out coordinates with the mouse, write them down as you go, and then use that information to write your HTML.

    I suspect that I know what you're thinking... that's too much like hard work! And I agree, it is for any non-trivial imagemap. Fortunately, there is a better way which I'll show you in the next chapter.

    Discuss How to make an imagemap - Client-Side Imagemaps


    Please feel free to post your comments:

    How To Make An Imagemap:
      << PreviousIntroduction   1   2   3Next >>  

    Disclosure: Our company's websites' content (including this website's content) includes advertisements for our own company's websites, products, and services, and for other organization's websites, products, and services. In the case of links to other organization's websites, our company may receive a payment, (1) if you purchase products or services, or (2) if you sign-up for third party offers, after following links from this website. Unless specifically otherwise stated, information about other organization's products and services, is based on information provided by that organization, the product/service vendor, and/or publicly available information - and should not be taken to mean that we have used the product/service in question. Additionally, our company's websites contain some adverts which we are paid to display, but whose content is not selected by us, such as Google AdSense ads. For more detailed information, please see Advertising/Endorsements Disclosures

    Our sites use cookies, some of which may already be set on your computer. Use of our site constitutes consent for this. For details, please see Privacy.

    Click privacy for information about our company's privacy, data collection and data retention policies, and your rights.

    Contact Us     Privacy     Terms Of Use     Advertising/Endorsements Disclosures

    Copyright © 2005-2020, Answers 2000 Limited

    In Association With
    Answers 2000 Limited is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to
    In Association With
    Answers 2000 Limited is a participant in the Amazon EU Associates Programme, an affiliate advertising programme designed to provide a means for sites to earn advertising fees by advertising and linking to
    As an Amazon Associate, our company earns from qualifying purchases. Amazon, the Amazon logo, Endless, and the Endless logo are trademarks of, Inc. or its affiliates.


    All trademarks are property of their respective owners.
    All third party content and adverts are copyright of their respective owners.

    Some graphics on our web sites are Copyright (C) 1997-2000 Hemera Technologies Inc., and used under license. All such pictures are provided for viewing purposes only and are not to be saved or downloaded. All such pictures of recognizable individuals are models and used for illustrative purposes only, and not meant to imply any association or endorsement of said individual with any product or service.