How to make an imagemap - Client-Side Imagemaps
   
Home
 
Books
 
File Formats
 
Glossary
 
Software
 
Tutorials
     
GraphicsAcademy.com  >  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">
</MAP>

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">
</MAP>

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 load 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.



Related Software:
  • Trellian ImageMapper
    Trellian Image Mapper is the quickest way to create image mapped images for your website. Full support for hyperlinked rectangles, circles and even polygon regions is provided and you can import all your current image maps. After you have created your image map, Trellian Image Mapper will generate the required HTML code ready to be pasted directly into your favorite HTML editor. You can even use the built-in image map previewer.

  • Web Hotspots
    Software for creating Client-Side Imagemaps.



  
How To Make An Imagemap:
 		 
  << PreviousIntroduction   1   2   3Next >>  
   
 		    
 
Privacy     Terms Of Use

Copyright © 2005-2008, Answers 2000 Limited

With any business, it is up to the individual owner of said business to ensure the success of the business. You may make more or less than any sample figures or results that might be quoted on our web sites or other publications. All business involves risk, and many businesses do not succeed. Further, Answers 2000 Limited does NOT represent that any particular individual or business is typical, or that any results or experiences achieved by any particular individual/business is necessarily typical.

In Association With Amazon.com
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.