0 296

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.



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.

For coords uste this one tool In Adobe Fireworks I’m using Slice Tool (2) to get x and y coordinates.

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.

You might also like More from author

Leave A Reply

Your email address will not be published.