Html map generator online

Online HTML image map creator

For example several areas on this image are clickable. The clickable areas can be a circle, rectangle or a polygon.

1. Upload any of the following image filetypes: .gif, .jpg, .png, .jpeg.
   The maximum file size = 100 KB.
   If the uploaded image has a width larger than 610px, it will be automatically resized to 610px.
2. Click your mouse on the image and draw a region (circle, rectangle or polygon) and enter the mandatory region information:
   • URL.
   • ALT text.
3. Press the «Save region» button.
4. All entered data are stored.
   An overview of all your created regions are displayed in the «Created regions» section.
5. After you have saved one or more regions, press the «Create HTML Map» button.
6. The HTML image map code can be found in the «Output» section on the bottom of the page as well as a zip file containing the same code including the uploaded image.
   Note: When you upload an image and its width is larger then 610px, the image will be resized to fit the page. When the image map is created the region coordinates are recalculated based on the original image scale.
7. For each uploaded image a unique Upload code is generated. You can continue working on your HTML image map at a later time by entering this code in the «Enter issued Upload code» field.
8. The HTML image map will be available for 10 hours after the «Create HTML Map» button is pressed and then will be automatically deleted.

Input HTML image map creator:

Output HTML image map creator:

Источник

HTML Map Creator

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.

First, specify the image you would like to map:

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:

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

HTML Map Code

CSS Map Code

What are HTML Maps?

The HTML 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 () to each of them – all you have to do is create a 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 tag to the right element.

Areas inside an HTML map

• 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.

Источник

area map Generator | HTML

Возможности online-генератора map area. Как им пользоваться?

1. желательно открыть браузер Mozilla FireFox.
2. ввести URL-адрес своего изображения в верхнее поле.
3. обозначить контур путём установок точек либо путём обведения необходимого участка с нажатой левой клавишей мышки. Красная линия покажет будущие очертания.
4. координаты (по два значения на каждую точку) будут записаны под картинкой. Для удобства цвет точек чередуется (чёрный/зелёный). Их можно изменять/удалять прямо в строке! При наведении координаты (на изображении в виде точки) принимают синий цвет, при фокусе — красный.
5. под кнопками располагается список предыдущих попыток. При новом заходе на страницу, серые пункты не будут сохранены.

  
 
   #raz < position: relative; display: inline-block; border: 1px solid #ccc; margin-top: .5em; >#raz img < vertical-align: middle; /* убрать под картинкой пробел */ > #raz canvas < position: absolute; left: 0; top: 0; >#razImg < display: block; width: 100%; padding: 5px; box-sizing: border-box; >#raz1 b:nth-child(even) < color: green; >#raz1 b:hover < color: yellow; >#raz1 b:focus  

  
 
   #raz < position: relative; display: inline-block; border: 1px solid #ccc; margin-top: .5em; >#raz img < vertical-align: middle; /* убрать под картинкой пробел */ > #raz canvas < position: absolute; left: 0; top: 0; >#razImg < display: block; width: 100%; padding: 5px; box-sizing: border-box; >#raz1 b:nth-child(even) < color: green; >#raz1 b:hover < color: yellow; >#raz1 b:focus