How do I get the six vertices for a clickable poly?

Question

I'm trying to understand how a color picker works.

Run the following code, the poly at the upper left corner is clickable.

 <div><img style="margin-right:2px;" src="https://i.stack.imgur.com/gyNvx.gif" usemap="#colormap" alt="colormap" data-pinit="registered"> </div> <map id="colormap" name="colormap"> <area style="cursor:pointer" shape="poly" coords="63,0,72,4,72,15,63,19,54,15,54,4"> </map>

The only thing I don't understand is this line of code.

coords="63,0,72,4,72,15,63,19,54,15,54,4"

I guess it gives some kind of boundaries of that poly, eg (63,0) is one of the six vertices of it.

Do I have to generate those manually?

Answer 1

You can indeed generate those 126 area elements using a script. The hexagons have specific metrics:

• their vertical sides have a height of 11 pixels
• their slanted sides have a height of 4 pixels and a width of 9 pixels.

This means that two horizontally neighbouring hexagons have an x-coordinate difference of 18 pixels, and two consecutive rows of hexagons have a y-coordinate difference of 15 pixels.

Here is a demo of how to generate those area elements dynamically. It also includes a click handler that will log the sequence number of the area that was clicked:

 let colormap = document.querySelector("map"); let html = ''; for (let y = 0; y < 195; y += 15) { let margin = Math.abs(6 - y / 15) * 9; for (let x = margin; x < 225 - margin; x += 18) { let coords = [x+9, y, x+18, y+4, x+18, y+15, x+9, y+19, x, y+15, x, y+4]; html += `<area style="cursor:pointer" shape="poly" coords="${coords}">\n`; } } colormap.innerHTML = html; let span = document.querySelector("span"); let areas = [...colormap.children]; colormap.addEventListener("click", e => { span.textContent = areas.indexOf(e.target); });

 div { display: flex }

 <div> <img style="margin-right:2px;" src="https://i.stack.imgur.com/gyNvx.gif" usemap="#colormap" alt="colormap" data-pinit="registered"> <span></span> </div> <map id="colormap" name="colormap"> </map>