Easy Imagemap Generator

Easy Imagemap Generator for html image mapping. Select an image. Set links and clickable areas to your image. Get HTML code for Imagemaps.

Just select an image from your PC or enter a image URL link, which you would like to map. For getting help, visit Infos page.

Select a local file

Switch to Flash Upload

Or insert an image link

After choosing a file, you can generate Imagemap
coordinates and HTML code by clicking into the image.

Infos: HTML Imagemaps

An imagemap is a HTML <map> element, which can used with a <img> to integrate links directly into an image. On the contrary to an <a>-tag, it allows to set several links into only one image.

Imagemaps are one of the best ways to add multiple links. Really useful for linking banners, newsletter, e-mails or landingpages. Just specify severel areas. Each area stores some coordinates.

Coordinates are pixel-values seperated with a comma and have an alignment from the left upper corner of the image. If you want to give the area a rectangle format, mark it as shape="rect" into HTML and set two (left-top and right-bottom) coordinate-pairs. Example:

HTML img map area Infos

For each area you can set links as attribute href="www.google.com".

This free image-mapping tool let you create the coordinates directly by clicking into the image - no programming knowledge required.

HTML Code: <img>, <map> & <area>

The clickable area can be rectangles shape="rect", polygons shape="poly" or circles shape="circle".

Shape-Values are coordiate-pairs. Every pair have a X and a Y value (from left/top of an image) separated with a comma. Every pair is as well separated with a comma.

  • Rectangle: Set four coordinates. x1,y1,x2,y2
  • Polygon: Set as many coordinates as you want (a multiple of two)
  • Circle: One coordinate-pair and second value a radius. x1,y1,radius

HTML Imagemap Demo Code with x / y

  1. <img src="teaser.jpg" usemap="#Teaser" alt="" />
  2. <map name="Teaser" id="Teaser">
  3.    <area alt="" href="#" coords="x1,y1,x2,y2" shape="rect" />
  4.    <area alt="" href="#" coords="x1,y1,x2,y2,x3,y3 [...] " shape="poly" />
  5.    <area alt="" href="#" coords="x1,y1,radius" shape="circle" />
  6. </map>


Use the <area> href-attribute to set links. It's also important to link the <img> with the <map> using usemap-attribute within the image. These value of the attribute must be the map's name-attribute.

For using this software, you just need to click into your uploaded image. So quickly forget the HTML code you've learned before ;)

Maps & Newsletter with Imagemaps

Imagemaps are defined with HTML 3.2. Nowadays every Web-Browser and Mail-Client supports the <map>-tag without having problems.

Popular applications are newsletter and e-mails with large teaser and landingpages, banner or world- / country-maps on websites.


  • Internet Explorer 6+
  • Mozilla Firefox
  • Google Chrome
  • Apple Safari


  • Outlook
  • Thunderbird
  • Apple Mail

For more infos, visit your best friend Wikipedia: Wikipedia: Image map.

About this Imagemap Tool

Hello, my name is Dario :)

Do you find Imagemap Generator helpful?
Write me an E-Mail or buy me a beer :-)


This Software uses Google Analytics.
Uploads are deleted after 1 day.

PS: Thanks for your donations and mining power :-)

You can't see an image?
Please upload a new one »

Click into the image to set coordinate values :)

Add Area
Clear Last
Clear All
Change Image

Info: Instead of watching ads, your computer is mining small amounts of cryptocurrency to support this website. Click here to stop. If you want to support me, please let the tab opened while not using it. Your progress: 0 (Overall: 0)