How to Link Image Areas in HTML <map> Tag

One of the most common parts in web development is the way how we create and handle images, from design to HTML/CSS conversion.

Do you know what is image map yet? Well, image map is a picture in which areas within the picture are links, sounds amazing right? One picture and can contains one or more links to other site pages or website.

I’m not really fan in HTML map tag but I’m truly amazed of how easy to create and implement complex images with ease without much knowledge in CSS and HTML and it save your time, I’m not saying CSS can’t do this, yes of course CSS can. In this tutorial I will share my way/technique of how to work with HTML map.


View the demo here


Define a shape for the clickable area.

  • default
  • rect
  • circle
  • poly

Specify the coordinates of the clickable area.

  • rect: left, top, right, bottom
  • circle: center-x, center-y, radius
  • poly: x1, y1, x2, y2, …


This contain only single image with map tag.

The above HTML code, result something like this.


In the demo, I’m using rect for shape and to get pair of coordinates I’m using Adobe Fireworks or if you don’t have one or don’t like fireworks you can use your preferred development tool.

In Adobe Fireworks I’m using Slice Tool (2) to get x and y coordinates, see below for example.

Press Ctrl + ] to display Tooltips, point the arrow in Left (x), Top(y), Right(x2), Bottom(y2) to get pair of coordinates.

If you want to use other shape, there’s no difference just point the arrow on every sides and follow the cords attributes above because it depends on the shape you want to use with.

That’s it, hope you like this article.

by Ryan Sutana

  • It’s arduous to search out knowledgeable folks on this topic, however you sound like you recognize what you’re talking about! Thanks
    You must take part in a contest for among the best blogs on the web. I will suggest this website!

  • I just couldn’t depart your site before suggesting that I extremely enjoyed the usual info a person supply on your guests? Is going to be again frequently to check out new posts