Автоматическое создание map area по изображению

Map area image

To automatically create image map (area map):

  • Draw a black and white image, where black to draw the active region, and white everything else.
  • Download the picture. (drag it to the download area, either click on the download area).
  • Wait until you're ready for the result.
  • If necessary, edit the resulting map.
  • Copy the result from the text field or press the button "Download".

To embed a map area to your site:

  • Insert the result into the code of your site.
  • Copy the map name from the name attribute (for example mean name card 560c3aa19140b)
  • Added to the img tag that contains the original color image, usemap attribute, which prophisied name cards with the symbol # at the beginning (for example, if the card name 560c3aa19140b, then the img tag should be the attribute usemap="#560c3aa19140b").
  • Now your image has active areas that are the references spelled out in the tags area of card used

If you want the field map area highlighted:

  • Plug in a javascript plugin (imagemapster for example)
  • And apply it to your image from the connected card, for example:
$("img[usemap]").mapster({
    scaleMap: true,
    fill: true,
    fillColor: '2CA7DC',
    fillOpacity: 0.75
});
Video guide (en)
Upload image
To generate a map area
You can download the black and white mask or a color image.
Download the result
Edit Map Area
Download the result

Examples of generated maps:

Some images have color elements, it map area for them was generated by the black-and-white mask.

Image for generator
(black-and-white mask)

The original image
(with the map and area lighting)

Image for generator
(black-and-white mask)

The original image
(with the map and area lighting)

Image for generator
(black-and-white mask)

The original image
(with the map and area lighting)

Image for generator
(black-and-white mask)

The original image
(with the map and area lighting)

Image for generator
(black-and-white mask)

The original image
(with the map and area lighting)

Image for generator
(black-and-white mask)

The original image
(with the map and area lighting)

Image for generator
(black-and-white mask)

The original image
(with the map and area lighting)

Image for generator
(black-and-white mask)

The original image
(with the map and area lighting)

Image for generator
(black-and-white mask)

The original image
(with the map and area lighting)

Image for generator
(black-and-white mask)

The original image
(with the map and area lighting)

Image for generator
(black-and-white mask)

The original image
(with the map and area lighting)

Image for generator
(black-and-white mask)

The original image
(with the map and area lighting)

Image for generator
(black-and-white mask)

The original image
(with the map and area lighting)

Image for generator
(black-and-white mask)

The original image
(with the map and area lighting)

Image for generator
(black-and-white mask)

The original image
(with the map and area lighting)

Image for generator
(black-and-white mask)

The original image
(with the map and area lighting)