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.

Browser-Support

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

Mail-Clients

  • Outlook
  • Thunderbird
  • Apple Mail

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

About this Imagemap Tool

This Software generates HTML Imagemaps and <area>-tags by clicking in an uploaded image.

Usage:

  • Upload or link an image
  • Click into the image to set coordinates
  • Copy the Imagemap HTML code

About me

Hi folks, My name is Dario, I'm a web developer and freelance programmer in Hamburg, Germany. I build this tool for easily developing Newsletter and Landingpages.

In some kinds of HTML, for example email templates, you don't have the opportunity to use special CSS hacks. It's better to use many images with a lot of links via image maps.

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
Easy Imagemap Generator
Uploads are deleted after 1 day
This Software uses Google Analytics
Feedback?
Copyright © 2016 by
3 € ?