Posted   by 

Edit Buttonresponsive Image Map Creator



Create An HTML Map

  1. Create your own custom map of Indian states. Color an editable map, fill in the legend, and download it for free to use in your project.
  2. Create an image map out of your image. It requires you to use HTML editing of your post where you use your mage, but the HTML code for the image is pretty simple. Use a free plugin (Responsive Image Maps) that handles image maps scaling. The plugin is dead-simple and does not require any settings.

HTML image maps are one of the best ways to add multiple links to a single image. HTML maps are fully supported by all browsers. Below you can find a free tool that will allow you to generate an HTML map in the easiest way possible- just draw the areas and give them the links, alts and targets. The system will generate the HTML map code for you. Creating an HTML map is easy! Just follow the steps below.

Creator

First, specify the image you would like to map:


Enter your image's URL:Upload a file: (Coming Soon..)

Drag your mouse to create quares where you'd your links to be, add thier target URL, alt text and taget window. when you're done click the 'Finish' button below:

Online Image Map Editor. Free online image mapper tool. Use images on the web or from your PC. Load your image, map your links, get the code! No software to download.


Enter link URL:Enter link alt:
Enter link target:

You're DONE! Copy one of the codes below and paste it in your HTML page:

Image

HTML Map Code

CSS Map Code


What are HTML Maps?

The HTML <map> tag was created in order to make it easy to set a few links on a single image. Instead of cutting the image into parts and adding an anchor tag (<a>) to each of them – all you have to do is create a <map> tag and connect it with the relevant image on your HTML page.
The HTML map element has only one required attribute: 'name', which is used later for connecting the <map> tag to the right <img> element.


Areas inside an HTML map

The way to specify the links inside an HTML map is to nest <area> tags inside the relevant map.
The <area> tag has a few important attributes:

  • shape: sets the shape of the area we want to add the link to. The shape attribute can be on of the following:
    1. 'rect' – For a rectangular link area(most common).
    2. 'circle' – For a circular link area.
    3. 'poly' – For a custom poligonal link area.
  • coords: sets the coordinates for the link area.
  • href: specifies the URL to link to.
  • alt: specifies the alternative text.
  • target: specifies the link's target window.

Looking for an attractive website?
Check out Simbla responsive website builder.

How to create an HTML image map?

To create an HTML image map you must specify your areas by thier relative pixel coordinates. This can sometimes be a very excruciating procedure since each area needs at least two (x,y) coordinates - Which means that for 5 areas on your HTML map you'll have to measure at least 10 different points on an image and type them all in. HTML Map offers you this free online tool for easily creating these areas - just drag and drop the link areas and the HTML map creator will automatically generate the entire code including measuring all the coordinates for you.


Check out this cool 3D Rubik's Cube Solver.Buttonresponsive
Find PokemonGO Friends!Edit
  • Overview
  • Getting Started
  • Map Settings
  • Markers
  • Overlays
  • Infobox
  • Category Legend
  • Custom Image Map
  • Heat Map
  • Crowdsourced Map
  • Import Map Data
  • Export Map Data
  • Preview and Publish
  • Embed Map to Website/blog/cms

Cross-platform custom image maps, which are viewable in iPhone, iPad, Android devices, and other tablets, can be created by using GMap Editor V2.

Edit Buttonresponsive Image Map Creator Download

  1. After login to iMapBuilder Online, select GMap Editor V2 in the Start Wizard >> Custom Image
  2. Enter Map Project Title
  3. Choose file to upload (*Supported Image Formats: JPG, PNG, GIF)
  4. Click Upload and Create Map
After you have uploaded the image, you can create the custom image map by using various tools in the GMap Editor V2. Remember to preview and publish the map once you have finished the editing.

Edit Buttonresponsive Image Map Creator Minecraft

Please also check the following video tutorial for more details in creating custom image map:

Edit Buttonresponsive Image Map Creator Free


Video tutorial - How to create a custom image map with your own image

Edit Buttonresponsive Image Map Creator Software


[ Top of Page ]