Draw an image map with the mouse

Hey. Just now I happened to deal with such a specific html feature as an image map. Frankly speaking, I didn’t often use it, and then, usually, everything was done in rectangle-shaped zones. But this was not the case. The task was to hang up links to individual regions of the image, which served as a map of the country, and, unfortunately, there could be no question of any canvas or svg. Only html only hardcore! So, the task is set, Google is activated, and you can start.

Theory

Perhaps we start with the theory, where do without it. The image map contains two tags: map - the map container and area - the selection area. The map is not limited to one zone and may contain an unlimited number of them. In addition to the standard attributes, the area tag has its own:

• coords - coordinates of the selection zone
• href - the link to which the transition will be made when clicking on the zone
• nohref - indicates that the zone does not contain a link
• shape - the shape of the selection
  
  • circle - selection zone in the form of a circle
  • default - selects the entire image area
  • poly - a selection area in the form of a polygon
  • rect - the selection zone in the form of a rectangle
• target - determines where the link will open

To connect the map to the image, specify the tag name attribute with an arbitrary name, and hang the usemap tag on the images, the value of which is specified in the " #name " format.

Since the selection area I was supposed to be polygonal, the value of the shape attribute, the area tag, we specify as poly - a polygonal area. In this mode, the coordinates of the point relative to the upper left corner — x, y — are indicated, separated by commas. The points are also separated by commas, which is puzzling at the start when reading such a code.
')

<img src="sample.png" width="200" height="200" alt="Sample" usemap="#sample"> <map name="sample"> <area shape="poly" coords="30,100,100,30,100,170,170,100"> </map> 

Writing Paint

I wasn’t teased by the perspective of Photoshop to find the coordinates of each point, manually rewrite the numbers from the Info window, and the tools that came across in Google were too monstrous. It was decided on the knee to write a small script that would allow you to place points simply by clicking on the desired zone in the image, and display the finished code.

To begin, we will prepare the layout:

 <div class="canvas" id="container"> <div class="inner" id="canvas"> <img src="img/sample.jpg" width="934" height="407" alt="Sample"> </div> </div> <div class="bar" id="bar"></div> <div class="info" id="info"></div> 

Buttons will be inserted into #bar to control the “peint”.
The generated html code will be displayed in #info.

CSS:

 body { margin: 0; padding: 20px; font-family: Arial, Helvetica, sans-serif; } img { border: none; outline: none; display: block; -moz-user-select: none; -webkit-user-select: none; user-select: none; } .canvas { border: 2px solid #333; padding: 2px; margin-bottom: 16px; display: inline-block; //display: inline; //zoom:1; } .canvas.draw { border-color: #3C0; } .canvas .inner { position: relative; } .canvas .point { width: 1px; height: 1px; background-color: #fff; border: 1px solid #000; overflow: hidden; position: absolute; } .bar { margin-bottom: 16px; } .info { background-color: #FCFCFC; border: 1px dotted #CCC; font-size: 12px; font-style: italic; padding: 8px; word-wrap: break-word; } 

In javascript everything is pretty simple. In the process of writing, I used my combat library, so do not be surprised at non-standard functions. To begin with, hang the mousedown event on #canvas, in which the point on the image will be rendered and its coordinates will be recorded.

 var addPoint = function(e){ var e = _.getEvent(e), offset = _.getOffset(nodes['canvas']), x = e.clientX + _.getDocScrollLeft() - offset[0], y = e.clientY + _.getDocScrollTop() - offset[1], node = nodes['canvas'].appendChild(_.node('div', {'class':'point'})); node.style.top = y-1+'px'; node.style.left = x-1+'px'; points.push({'x' : x, 'y' : y, 'node' : node}); e.preventDefault && e.preventDefault(); return false; }; 

Then we will write a function that will generate the html code of our map.

 var renderInfo = function(){ var text; _.clearNode(nodes['info']); nodes['info'].appendChild(_.node('span', '<map>')); nodes['info'].appendChild(_.node('br')); for(var i = 0, l = areas.length; i < l; i++){ if(areas[i].length > 0){ text = '<area shape="poly" coords="'; for(var i2 = 0, l2 = areas[i].length; i2 < l2; i2++){ if(i2 > 0){ text += ','; } text += areas[i][i2]['x'] + ',' + areas[i][i2]['y']; } text += '">'; nodes['info'].appendChild(_.node('span', text)); nodes['info'].appendChild(_.node('br')); } } nodes['info'].appendChild(_.node('span', '</map>')); }; 

Let's frame everything into a class, some auxiliary functions, that's all. I hope someone will be useful in sowing tulza.

Links

Demo .
Surses (~ 60 KB).
Github

Ps. Added link to githab.
PS2. Now “paint” works on canvas.