• Skip to main content
  • Skip to primary sidebar
  • Skip to footer

Matt Doyle | Elated Communications

Web and WordPress Development

  • About Me
  • Blog
    • Design & Multimedia
      • Photoshop
      • Paint Shop Pro
      • Video & Audio
    • Online Marketing
      • E-Commerce
      • Social Media
    • Running a Website
      • WordPress
      • Apache
      • UNIX and Linux
      • Using FTP
    • Web Development
      • HTML
      • CSS
      • JavaScript
      • PHP
      • Perl and CGI Scripting
  • Portfolio
  • Contact Me
  • Hire Me
Home / Blog / Web Development / HTML / Creating Image Maps

Creating Image Maps

1 October 2002 / 27 Comments

This article shows how to create image maps using HTML. You’ll learn how to create client-side image maps, and we’ll touch on server-side image maps too.

Image maps explained

An image map is a way of defining “hot spot” links within an image on a Web page. This means that, rather than having the whole image behave as one link, you can have lots of different links within the one image.

For example, the single image below has an associated image map containing 3 hot spots that, when clicked on, bring up different JavaScript messages:

Shapes

Circle Rectangle Triangle Default

Try clicking on each of the shapes and you’ll see that each shape has its own link, bringing up its own JavaScript message!

Linking to an image map: The usemap attribute

How do you turn an image into an image map? Well, to associate an image map with an image, simply add the usemap attribute to the img tag for the image. In the above example, the image map is called "shapes", so our img tag looks like this:


<img src="images/shapes.jpg" width="375"
height="102" style="border: none;" alt="Shapes" usemap="#shapes"/>

Note the usemap="#shapes" attribute, that associates the image map with the image.

Creating an image map: The map tag

The other half of the image map is the map definition itself. In this definition, you tell the browser where the hot spots are in the image, and what the hot spots need to link to.

The map is defined using the <map></map> tag. In our example above, the map tag looks like this:


<map name="shapes" id="shapes">

<area	shape="circle"
	coords="58,50,40"
	href="javascript:clicked_on('circle');"
	title="Circle" alt="Circle"/>

<area	shape="rect"
	coords="136,11,227,89"
	href="javascript:clicked_on('rectangle');"
	title="Rectangle" alt="Rectangle"/>

<area	shape="poly"
	coords="309,13,358,89,257,89"
	href="javascript:clicked_on('triangle');"
	title="Triangle" alt="Triangle"/>

<area	shape="default"
	nohref="nohref" title="Default" alt="Default"/>

</map>

You can see that we’ve defined 3 “hot spot” areas in the image map β€” a circle, a rectangle, and a polygon β€” and that we’ve linked each of these areas to a JavaScript function to display the appropriate shape name.

The above map element is placed after the image in our HTML file. In fact, it can be placed anywhere within the HTML page body.

The general syntax for the map element is:


<map name="map-name">

<area	shape="area shape"
	coords="area coordinates"
	href="area hyperlink" or nohref="nohref"
	target="hyperlink target"
	title="area title"
        alt="alternate text"/>

<area	shape="area shape" ...

</map>

So, each image map is given a name (map-name), and one or more area tags to specify the hot spots in the image.

The area tag has the following attributes:

shape="rect | circle | poly | default"

Specifies the shape of the area. Possible values are:

  • rect (a rectangular shape),
  • circle (a circular shape),
  • poly (an arbitrary polygon, with 3 or more points), or
  • default (which represents the remaining area of the image not defined by any area tags).

coords="area-coordinates"

Specifies the coordinates that define the corners of the shape. The coordinates depend on the shape specified in the shape attribute:

Shape Coordinates
rect coords="x1,y1,x2,y2"
(The top left and bottom right corners of the rectangle)
circle coords="x,y,r"
(The centre and radius of the circle)
poly coords="x1,y1,x2,y2,x3,y3,..."
(The corners of the polygon)

Note that all coordinate values are relative to the top left corner of the image. In other words, the top left corner always has coordinates (0,0).

Note also that the default shape type does not need any coordinates.

href="area-hyperlink"

This is the URL that you’d like to link the hot spot to. It works just like a standard <a href=...> tag.

You can specify a nohref attribute instead, in which case the hot spot will not link to anything.

target="hyperlink-target"

This is the optional target window or frame to open the linked URL in. Again, it works just like the target attribute in a standard <a href=...> tag.

title="area-title"

This attribute allows you to give the area a title. When the mouse is rolled over this hot spot, the browser will usually pop up a tool tip displaying this title.

Server-side image maps

As an alternative to defining the whole image map in HTML for the browser to read, you can use server-side image maps. With this type of map, the browser simply sends the (x,y) coordinates of the point clicked on to a server-side script (such as a CGI script).

To define a server-side map, you simply include the ismap attribute, and place an <a href> tag around the image, specifying the server-side script to send the (x,y) information to:


<a href="shapemap.cgi">
<img src="images/shapes.jpg" width="375"
height="102" style="border: none;" ismap="ismap"/>
</a>

Then, when you click on the image, the browser sends the (x,y) coordinate of the point that you clicked on to the server-side script, which can then interpret these (x,y) values and take an appropriate action. The coordinates are appended as parameters to the end of the script URL:

Server-side image map data flow diagram

For example, if you wanted the user to choose a country from a world map image, you could use the server-side script to calculate which country was clicked on, and then display information about that country.

Another way of creating a server-side image map is with the image input type in web forms:


<form action="shapemap.cgi">
<input type="image" name="shapes_image"
src="images/shapes.jpg" width="375"
height="102" style="border: none;"/>
</form>

In this case, the (x,y) coordinates are sent as form fields named fieldname.x and fieldname.y. So in the above example, the coordinates would be contained in the fields shapes_image.x and shapes_image.y.

It’s best to use a server-side map whenever the map has many areas, or where the areas are not easily defined by simple shapes such as circles, rectangles and polygons.

Working out image map coordinates

If you’re using a Web page editor such as Macromedia’s Dreamweaver you can draw image maps straight onto your images and let the editor work out the coordinates, but what if you’re editing your page by hand?

One easy way to work out coordinates is to change your image map from client-side to server-side temporarily, by changing the usemap="mapname" attribute to ismap="ismap", and adding a dummy <a href> tag around the image, e.g.:


<a href="#"><img src="images/shapes.jpg" width="375"
height="102" style="border: none;" alt="Shapes" ismap="ismap"/></a>

Then, as you roll the mouse over the image, you should see the coordinates appear after the “?” in the status bar of your browser! Try moving your mouse over the image below to see if this works:

Shapes

If you can’t get that working, another technique is to open your image in a graphics package such as Adobe Photoshop. You can then move the mouse over the image and see the mouse coordinates in the Info Palette.

You now know how to create image maps in HTML. Happy mapping!

Filed Under: HTML Tagged With: client-side, graphic, html basics, HTML tutorial, imagemap, navigation, server-side, usemap, web page

Reader Interactions

Comments

  1. nivix92 says

    16 December 2009 at 6:06 am

    Hi,
    The tutorial on how to create an image map and find the coords are very simple and in-detail. Really nice one… Keep it up.

    [Edited by nivix92 on 16-Dec-09 06:07]

    Reply
    • Mahendra says

      4 September 2020 at 5:38 pm

      how to apply transform css for image map particular area coordinates

      Reply
  2. matt says

    17 December 2009 at 7:20 pm

    Thanks Nivix – glad you liked it. πŸ™‚

    Reply
  3. rajivverma1 says

    19 March 2010 at 10:47 pm

    I am workgin in dreamweaver and made an image map. I am trying to do osmethign opposite. I put am image of tv on my page and on teh tv screen(image map), I want to bring/show content liek vedio. pic content. Is it good to do it that way or do put borders seperate and show teh content in a table cel.

    Basically it is not clear how to provide a hyperlink to a text and whow teh taget content on same page, wihtin an image map.(typically image amps are used fo takign you somewehe, I am bringing content to image map)

    Reply
  4. cat says

    22 March 2010 at 3:14 am

    Hi Rajivverma1,

    You need something other than an image map to do what you describe. An image map is only for defining different areas as links.

    Off the top of my head I don’t think there’s an easy way to do what you’re describing. You probably need to look at learning some javascript and using that to replace areas within the page (e.g. divs with id attributes so that you can reference them easily from the javascript).

    Hope that helps!

    Cat

    Reply
  5. wedp says

    1 April 2010 at 11:42 am

    Hey, thanks for the tutorial.
    I followed your instructions precisely (I thought), but nothing happened other than that this ugly blue box appeared around the entire image. Still no clickability in the image. Here’s my code. Can you tell where I went wrong?

    <img src="/img/header3.png" "width=1000" "height=70" "style=border: none;" usemap="header"/>
    <map name="header">
    <area  shape="rect"
           coords="140,5,275,65"
           href="http://www.yemenpeaceproject.org"/> 
    
    <area  shape="rect"
           coords="385,15,475,30"
           href="/about/"/>
    
    <area  shape="rect"
           coords="485,15,545,30"
           href="/news/" />
    
    <area  shape="rect"
           coords="550,15,610,30"
           href="/issues"/>
    
    <area  shape="rect"
           coords="620,15,685,30"
           href="/media"/>
    
    <area  shape="rect"
           coords="380,35,520,50"
           href="/communication"/>
    
    <area  shape="rect"
           coords="530,35,585,50"
           href="/links/links.php"/>
    
    <area  shape="rect"
           coords="595,35,690,50"
           href="/contact"/>
    
    <area  shape="rect"
           coords="690,0,865,70"
           href="/arabic"/>
    </map>
    

    [Edited by wedp on 01-Apr-10 11:57]

    Reply
  6. matt says

    3 April 2010 at 5:19 am

    Hi wedp,

    There are 2 problems that I can see:

    1) In your IMG tag, you’ve put both the attribute names and values in quotes. Only the attribute values should be quoted.

    2) You need to put the hash (#) symbol before the map name in the “usemap” attribute.

    So the following IMG tag should work OK:

    <img src="/img/header3.png" width="1000" height="70" style="border: none;" usemap="#header" />
    

    Hope that helps!
    Matt

    Reply
  7. rewsa2 says

    23 May 2010 at 12:05 pm

    Here are some tools helping to determine areas coordinates more exactly.

    http://dhost.info/eleomap/
    http://www.image-maps.com/

    Reply
  8. matt says

    24 May 2010 at 2:56 am

    @rewsa2: Nice, thanks for posting those tools. πŸ™‚

    Reply
  9. andym says

    26 July 2010 at 1:19 pm

    Question: can you create separate coordinates for noncontiguous polys in the same line for an area?

    Let’s say, for example, I’ve got a map of the USA and California & Hawaii are grouped in the same category. I’d like to hover over California and also make a box around Hawaii show as highlighted, along with California.

    It seems like you can only do continuous polygon for one area at a time. Or is there a symbol used to separate noncontiguous (separated) polygons? I know the semicolon is the same as the comma.

    i.e. <area shape=”poly” coords=”[polygon 1 coordinates]….[SPECIAL SYMBOL?????]…[polygon 2 coordinates]……..”>

    Reply
  10. matt says

    27 July 2010 at 4:47 am

    @andym: “I’d like to hover over California and also make a box around Hawaii show as highlighted, along with California” – How are you doing your highlighting? If you’re using JavaScript then you could attach your JavaScript onmouseover handler to both poly areas, so that both are highlighted when either is rolled over.

    Reply
  11. andym says

    27 July 2010 at 12:47 pm

    Thanks Matt,

    I was actually trying to use a custom jquery script (“highlightmap”) created by someone, but I didn’t know how to apply the onmouseover action to both areas simultaneously. But if someone has a normal javascript example of what you’re talking about, I’d greaty appreciate it.
    I just haven’t found any help out there for this exact scenario.

    Thanks!

    Reply
  12. matt says

    28 July 2010 at 4:30 am

    @andym: You mean this? http://plugins.jquery.com/project/maphilight

    It has a groupBy() option that you can use to group area elements by a given attribute (e.g. ‘rel’). Then when you mouseover 1 area, the other one highlights too: http://davidlynch.org/js/maphilight/docs/

    Example: http://davidlynch.org/js/maphilight/docs/demo_features.html

    Pertinent code from the demo:

    <map name="features">
        <area id="star" rel="group" shape="poly" coords="78,83,70,100,52,104,64,115,61,133,78,124,94,133,91,116,104,102,87,101,79,88" href="#" alt="star" class="{strokeColor:'0000ff',strokeWidth:5,fillColor:'ff0000',fillOpacity:0.6}"></area>
        <area id="square2" shape="poly" coords="151,249,175,225,182,222,167,193,136,221,153,250" href="#" alt="another square" rel="group" class="{groupBy:'rel'}"></area>
    </map>
    
    Reply
  13. andym says

    28 July 2010 at 1:05 pm

    Matt, thanks for helping me. I agree, this is all I needed, and wish I had discovered it myself before asking.

    I guess I assumed the solution had to be more on the “coords=” attribute side, but this will work for sure.

    You’re awesome. Best regards,
    Andy

    Reply
  14. matt says

    29 July 2010 at 3:50 am

    No problem Andy – glad it helped πŸ™‚
    Matt

    Reply
  15. moreeves says

    25 August 2010 at 7:30 pm

    I have a question similar to that posed by Rajivverma1 back in March of this year . . . he was working in DreamWeaver, I am working with FP 2003 using hotspots to define sections of a football stadium. What I want to do is link TO the hotspot area on the stadium map FROM a text link… ie – if I click on a hyperlink “E-U4-AA” , i want it to bring up that hotspot on the map. Is this possible? Thank you.
    Mike

    Reply
  16. matt says

    25 August 2010 at 7:55 pm

    @moreeves: You could use the jQuery plugin I posted above to highlight the relevant area of the map:

    http://plugins.jquery.com/project/maphilight
    http://davidlynch.org/js/maphilight/docs/demo_features.html

    Cheers,
    Matt

    Reply
  17. moreeves says

    25 August 2010 at 8:14 pm

    Thanks for the quick reply, Matt – I will give that a try. Have a great day!
    Mike R

    Reply
  18. matt says

    26 August 2010 at 8:30 pm

    No problem Mike πŸ™‚

    Reply
  19. pamlynk says

    24 May 2011 at 5:29 pm

    Great article! Just what I needed to know about image maps, especially the part about viewing the coordinates in the browser status bar.
    thanks!

    Reply
  20. matt says

    27 May 2011 at 3:50 am

    @pamlynk: You’re welcome – glad it helped πŸ™‚

    Reply
  21. kevyar says

    15 August 2011 at 4:17 pm

    Matt!! thanks so much man, I have been trying to find out how to learn how to create image maps for a little while (I didn’t even know exactly what the name of what I wanted to do was!), and your tutorial was perfect! Thanks again for the help getting me set up with the image maps

    Reply
  22. matt says

    23 August 2011 at 2:31 am

    @kevyar: No problem πŸ™‚

    Reply
  23. preeti says

    26 September 2011 at 1:04 am

    Hi Matt,

    I am trying to use server side image map logic, but it does not work for me. When I click my image, it asks to download my cgi file rather than opening a html link. I am stuck here from last couple of days. Can you urgently help please.

    My html page code –
    <html>

    <head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=windows-1252″>
    <title>New Page 1</title>
    </head>
    <body>
    <a href=”txt.cgi” >
    <img src=”wteeBU.gif” ismap=”ismap” />
    </a>
    </body>
    </html>

    Code of cgi file –
    rect C:NewFolderred.html 105,206,170,246

    Code of my red.html –
    <html>
    <head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=windows-1252″>
    <title>New Page 1</title>
    </head>
    <body bgcolor=”red” >
    </body>
    </html>

    Reply
  24. matt says

    28 September 2011 at 4:50 am

    @preeti: I don’t understand what you’re trying to do here. If you want to create a server-side image map (generally a bad idea these days) then your server-side CGI script needs to read the x and y values of the clicked point passed in the query string, and process the values accordingly:

    script.cgi?x,y

    Reply
  25. preeti says

    28 September 2011 at 6:27 am

    Hi Matt,

    I completely agree that using server side image map is not a good thing to do.

    I have built a slide show using fadein-fadeout mechanism (jquery). I want that when my last slide appears it shud have 4 links. Now to build this mechanism I am only left with server side image map. (Please suggest in case I can do it with some other method)

    I have created a cgi file which has information of only one link as of now. co-ordinates – 105,206,170,246 ; shape- rectangle.

    I want that when user clicks on my page with image

    <body>
    <a href=”txt.cgi” >
    <img src=”wteeBU.gif” ismap=”ismap” />
    </a>
    </body>

    within mentioned co-ordinates it should redirect to red.html page.

    Can you please guide me how can I do that.

    Thanks in advance!!

    Reply
  26. matt says

    29 September 2011 at 4:53 am

    @preeti: As I say, your CGI script needs to execute, read the x,y values of the clicked point, and do something with them. You can’t just write “rect C:NewFolderred.html 105,206,170,246”. You need to write some code (PHP, Perl, etc) to do the redirect.

    Personally I would use JavaScript/jQuery to detect when the last slide is displayed, then reveal a div containing your 4 links that’s overlaid on top of the image using position: absolute and z-index: 999. No need to write server-side scripts.

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

To include a block of code in your comment, surround it with <pre> ... </pre> tags. You can include smaller code snippets inside some normal text by surrounding them with <code> ... </code> tags.

Allowed tags in comments: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre> .

Primary Sidebar

Hire Matt!

Matt Doyle headshot

Need a little help with your website? I have over 20 years of web development experience under my belt. Let’s chat!

Matt Doyle - Codeable Expert Certificate

Hire Me Today

Call Me: +61 2 8006 0622

Stay in Touch!

Subscribe to get a quick email whenever I add new articles, free goodies, or special offers. I won’t spam you.

Subscribe

Recent Posts

  • Make a Rotatable 3D Product Boxshot with Three.js
  • Speed Up Your WordPress Website: 11 Simple Steps to a Faster Site
  • Reboot!
  • Wordfence Tutorial: How to Keep Your WordPress Site Safe from Hackers
  • How to Make Awesome-Looking Images for Your Website

Footer

Contact Matt

  • Email Me
  • Call Me: +61 2 8006 0622

Follow Matt

  • E-mail
  • Facebook
  • GitHub
  • LinkedIn
  • Twitter

Copyright © 1996-2023 Elated Communications. All rights reserved.
Affiliate Disclaimer | Privacy Policy | Terms of Use | Service T&C | Credits