Click on the part of the one-time picture

[rosemadder]

There is a table with the same pictures of the switch.

function on() {
  alert('Switch ON');
}
function off() {
  alert('Switch OFF');
}

<map name=swm>
 <area shape=rect coords="0,0,40,40" href="javascript:on()" alt="on">
 <area shape=rect coords="0,40,40,80" href="javascript:off()" alt="off">
</map>
<table>
 <tr><th colspan=2>Правый выключатель</tr>
 <tr><td class=dev><img src='sw.png' usemap='#swm' width=80 height=80></td>
  <td><code>↓</code><small>2015-12-10</small></tr>
 <tr><th colspan=2>Средний выключатель</tr>
 <tr><td class=dev><img src='sw.png' usemap='#swm' width=80 height=80></td>
   <td><code>↑</code><small>08:55:33</small></tr>
 <tr><th colspan=2>Левый выключатель</tr>
 <tr><td class=dev><img src='sw.png' usemap='#swm' width=80 height=80></td>
   <td><code>↑</code><small>08:55:33</small></tr>
 <tr><th colspan=2>Комплект датчиков</tr>
 <tr><td class=dev><img src='sn.png' width=80 height=80></td>
  <td><em>100lx</em><br>
   <em>20°C</em><br>
   <small>14:48:06</small></tr>
</table>

Is it possible, without a multiplication of the maps, to distinguish the picture of the clicked?

[carriann]

Delete the use map and check the click coordinates.

document.addEventListener('click', function(e) {
  var 
    img = e.target,
    x;
if (img.tagName !== 'IMG') return;
// Координаты точки на картинке на которую кликнули

x = (e.layerX == undefined ? e.offsetX : e.layerX) - img.getBoundingClientRect().left;
// Проверяем принадлежность к классу

if (img.classList.contains('left') && x < img.offsetWidth / 2) {

alert('Кликнули по левой части картинки:' + img.alt);

} else if (img.classList.contains('right') && x > img.offsetWidth / 2) {

alert('Кликнули по правой части картинки:' + img.alt);

}

});

<img src="" class="left" alt="Картинка 1 (левая)" width="100" height="100" />

<img src="" class="left" alt="Картинка 2 (левая)" width="100" height="100" />

<img src="" class="right" alt="Картинка 3 (правая)" width="100" height="100" />