#pos1, #pos2 {
position:absolute;
}
#positional {
width:300px;
height:100px;
position:relative;
margin-left:auto;
margin-right:auto;
}
img {
width:272px;
height:92px;
}
<map name="Map" id="Map">
<area shape="rect" coords="0,0,68,46" title="0,0"/>
<area shape="rect" coords="68,0,136,46" title="1,0"/>
<area shape="rect" coords="136,0,204,46" title="2,0"/>
<area shape="rect" coords="204,0,272,46" title="3,0"/>
<area shape="rect" coords="0,46,68,92" title="0,1">
<area shape="rect" coords="68,46,136,92" title="1,1">
<area shape="rect" coords="136,46,204,92" title="2,1">
<area shape="rect" coords="204,46,272,92" title="3,1">
</map>
<div id="positional">
<img id="pos1" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" usemap="#Map" />
<img id="pos2" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" usemap="#Map" />
</div>
var width_img = document.getElementById('pos1').width;
var height_img = document.getElementById('pos1').height;
document.addEventListener('mouseover', function(e) {
if(e.target.tagName === 'AREA') {
var coord = (e.target.coords).split(',');
document.getElementById('pos1').style.clipPath = "inset("+coord[1]+'px '+(width_img-coord[2])+'px '+(height_img-coord[3])+'px '+coord[0]+'px'+")";
document.getElementById('pos1').style.zIndex = 100;
document.getElementById('pos1').style.background = 'orange';
} else {
document.getElementById('pos1').style.background = '';
}
}, false);
Inna wersja:
#pos1, #pos2 {
position:absolute;
}
#positional {
width:274px;
height:94px;
position:relative;
margin-left:auto;
margin-right:auto;
border:1px solid black;
padding:10px 10px 10px 10px;
background:tomato;
}
img {
width:272px;
height:92px;
background:darkolivegreen;
}
<map name="Map" id="Map">
</map>
<div id="positional">
<img id="pos1" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" usemap="#Map" />
<img id="pos2" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" usemap="#Map" />
</div>
var height_img = (document.getElementById('pos1').height);
var width_img = (document.getElementById('pos1').width);
var large_grid_width = 136;
var large_grid_height = 46;
var height_grid = 0;
var width_grid = 0;
var iterator1 = 0;
var iterator2 = 0;
for(var i=0;i<height_img;i+=large_grid_height) {
width_grid = 0;
iterator2 = 0;
height_grid += large_grid_height;
for(var j=0;j<width_img;j+=large_grid_width) {
width_grid += large_grid_width;
var area = document.createElement('area');
area.coords = (j)+','+(i)+','+width_grid+','+height_grid;
area.title = j+' '+i+' | '+iterator2+' '+iterator1;
document.getElementById('Map').appendChild(area);
iterator2++;
}
iterator1++;
}
document.addEventListener('mouseover', function(e) {
if(e.target.tagName === 'AREA') {
var coord = ((e.target.coords)).split(',');
document.getElementById('pos1').style.clipPath = "inset("+coord[1]+'px '+(width_img-parseInt(coord[2]))+'px '+(height_img-parseInt(coord[3]))+'px '+coord[0]+'px'+")";
document.getElementById('pos1').style.zIndex = 100;
document.getElementById('pos1').style.background = 'orange';
} else {
document.getElementById('pos1').style.background = '';
}
}, false);
Za pomocą zmiennych large_grid_width i large_grid_height możesz zmienić sobie szerokość i wysokość kratki. Jeśli masz w CSS dla image (img) ustawione np. takie wymiary: width:100px;height:100px;, to możesz dać tym zmiennym po 10px szerokości i wysokości, ponieważ 100/10=10, więc wychodzi liczba całkowita. Jeśli nie wyjdzie całkowita, to wtedy ostatnie kratki będą tak jakby przycięte.
Zmienne globalne na lokalne i tego typu elementy możesz sobie pozamieniać sam, jeśli widzisz gdzieś, że lepiej byłoby użyć let zamiast var i odwrotnie, a może nawet const, to jak najbardziej dokonaj takiej edycji.