Леонид Каганов: дневник

Интересную заставку научился делать:

В принципе ничего сложного: берешь картинку (большую, мы ее по размеру экрана автоматически уменьшим), идешь на сайт удобного редактора http://summerstyle.github.com/summer/ и рисуешь к ней поля. Затем сопровождаешь таким вот скриптиком, а вместо <map>...</map> подставляешь тот map, что выдал сайт-редактора.

<script>

function remap(e) {

if(typeof(e.naturalHeight)=='undefined') { // IE 6/7/8
var o=new Image(); o.src=e.src; var nw=o.width,nh=o.height; o=undefined;
} else var nh=e.naturalHeight,nw=e.naturalWidth;

var w=getWinW()-15, k=w/nw;

var mp=document.getElementsByTagName('map').item(0);
mp.innerHTML=mp.innerHTML.replace(/<area /g,"<area onmouseover='ff1(this)' onmouseout='ff0()' "); init_tip(mp);

e.width=w; e.height=nh*k;

idd('tens').style.width=idd('tuns').style.width=(w-15)+'px';
idd('tens').style.height=idd('tuns').style.height=(e.height-15)+'px';

setOpacity(idd('tens'),0.2);
var x=mp.getElementsByTagName('area');
for(var i in x) { if(typeof(x[i].tagName)=='undefined') continue;
var m=x[i].coords.split(','); for(var j in m) { m[j]=Math.floor(m[j]*k); } x[i].coords=m.join(',');
}
}

function ff0(){ zakryl('tens'); }

function ff1(e){ e=e||window.event;
var m=e.coords.split(','),s='',k=1;
for(var l=m.length,i=0;i<l;i++){ s=s+m[i]+(k<0?' ':','); k=k*-1; }
zabil('tens',"<svg width='"+idd('tens').style.width+"' height='"+idd('tens').style.height+"' xmlns='http://www.w3.org/2000/svg' version='1.1'><polygon points='"+s+"' fill='rgb(249,249,249)' stroke-width='1' stroke='rgb(0,0,0)' /></svg>");
otkryl('tens');
}
</script>

<div id='tens' style='display:none;position:absolute;z-index:4;top:0px;left:0px;'></div>
<img src='http://lleo.me/t' id='tuns' style='position:absolute;z-index:5;top:0px;left:0px;' usemap="#map">
<img onload='remap(this)' style='z-index:3;position:absolute;top:0;left:0;margin:0px;padding:0px;' src="http://lleo.me/blog/2013/berezin/komnata.jpg" width="320" height="200">

<!-- http://summerstyle.github.com/summer/ -->

<map name="map">

<area shape="poly" coords="2277, 530, 2256, 894, 2488, 911, 2503, 504" href="shema.htm" title="Схема" />
<area shape="poly" coords="1438, 995, 1440, 1168, 1460, 1184, 1460, 1197, 1465, 1204, 1461, 1207, 1459, 1230, 1458, 1244, 1462, 1248, 1461, 1252, 1672, 1277, 1675, 1269, 1706, 1244, 1708, 1190, 1671, 1189, 1670, 1182, 1671, 1182, 1689, 1164, 1690, 972, 1624, 964, 1590, 967, 1578, 959, 1554, 959, 1546, 965, 1491, 964, 1450, 967" href="tv.htm" title="Телевизор" />

<area shape="poly" coords="1031, 1230, 1049, 1209, 1049, 1204, 1045, 1002, 1326, 997, 1330, 1215, 1331, 1249, 1053, 1271, 1044, 1272, 1034, 1250" href="display.htm" title="Дисплей" />

<area shape="poly" coords="477, 1309, 914, 1274, 959, 1312, 1046, 1303, 1047, 1289, 1029, 1277, 1030, 1267, 1033, 1264, 1040, 1279, 1053, 1285, 1094, 1284, 1106, 1276, 1112, 1280, 1095, 1293, 1094, 1300, 1102, 1306, 1120, 1310, 1133, 1314, 1072, 1322, 1047, 1329, 1046, 1338, 1050, 1351, 1064, 1364, 1080, 1377, 1091, 1383, 1093, 1389, 1110, 1401, 1432, 1356, 1434, 1343, 1464, 1342, 1445, 1358, 1433, 1368, 1420, 1394, 1411, 1406, 1408, 1423, 1407, 1436, 1404, 1440, 494, 1550, 483, 1548, 468, 1315" href="stol.htm" title="Стол" />

<area shape="poly" coords="1892, 1034, 1880, 1042, 1861, 1044, 1836, 1045, 1835, 1053, 1836, 1060, 1817, 1070, 1822, 1080, 1835, 1086, 1863, 1095, 1857, 1109, 1857, 1128, 1869, 1131, 1872, 1126, 1881, 1121, 1891, 1120, 1905, 1135, 1913, 1176, 1909, 1184, 1914, 1199, 1923, 1192, 1922, 1181, 1929, 1174, 1925, 1166, 1926, 1120, 1934, 1114, 1937, 1103, 1963, 1107, 1957, 1121, 1969, 1136, 1982, 1126, 1981, 1112, 1984, 1107, 1991, 1101, 1993, 1096, 1985, 1095, 2001, 1082, 1988, 1073, 1966, 1069, 1966, 1055" href="polka.htm" title="полочка" />

<area shape="poly" coords="1121, 1940, 1131, 1897, 1145, 1870, 1147, 1828, 1160, 1815, 1177, 1802, 1414, 1729, 1409, 1458, 1416, 1412, 1445, 1366, 1480, 1336, 1517, 1331, 1552, 1332, 1562, 1341, 1571, 1330, 1583, 1330, 1590, 1340, 1592, 1352, 1609, 1359, 1632, 1361, 1661, 1354, 1680, 1342, 1697, 1324, 1694, 1315, 1697, 1304, 1706, 1303, 1715, 1307, 1737, 1287, 1759, 1282, 1783, 1289, 1796, 1314, 1804, 1352, 1801, 1390, 1793, 1440, 1783, 1496, 1774, 1560, 1769, 1629, 1757, 1701, 1748, 1784, 1749, 1839, 1750, 1882, 1754, 1941" href="kreslo.htm" title="Кресло" />

<area shape="poly" coords="1258, 606, 1499, 616, 1487, 959, 1445, 962, 1437, 985, 1249, 992, 1249, 606" href="kartina.htm" title="Картина на стене" />

<area shape="poly" coords="1736, 94, 1808, 567, 2078, 522, 1995, 2, 1905, 2" href="portret.htm" title="Портрет" />

<area shape="poly" coords="131, 177, 317, 195, 320, 538, 130, 532" href="okno1.htm" title="Первое окно" />
</map>

В принципе браузер и сам уже работает с картинкой - типа кликаешь в нужную область, и попадаешь. Скрипт нужен для того, чтобы картинка разверсталась на весь экран и на ней выделялись по наведению мышкой объекты.

Единственное что - почему-то в Опере глючит. Через раз работает. Потом разберусь. Слегка разобрался: кретинская Опера не умеет отрабатывать прозрачные наложения. То есть, если я поверх картинки кладу слой с полупрозрачным рисунком, то Опера сразу переставляет указатель мыши на него, при этом уходя с картинки, на которую указывала (и выдавая событие mouseout). pointer-events:none здесь не помогает почему-то.

UPD: Починил проблемы в Опере (возможно заодно и в ИЕ, но с ним пока не занимался вообще - нету его у меня). Гадская Опера не умеет делать объекты "прозрачными" для клика мыши. Поэтому я применил "тачскрин". То есть объектов на экране не два (сама картинка и накладывающаяся тень), а три: снизу сама картинка, которая ни на что не влияет, на самой поверхности - того же размера один прозрачный пиксель-картинка (экран), который и принимает от мыши map навигацию (но при этом изображения не содержит, оно просто просвечивает с нижнего слоя), а посередине между ними появляется слой с тенью, но он уже ничего не заслоняет - ведь вся работа мышью идет по верхнему прозрачному "тачскрину".

UPD: Хорошие вести с фронтов: в IE7 и IE9 работает, в IE9 даже подсветка есть. Но надо вписать в шаблон заметки (я взял blank.htm) на самый верх перед всякими <html... строку: <!DOCTYPE html> - это необходимо, чтобы переключить IE в режим совместимости HTML5.

Остается пока под вопросом Safari и не работает IE8 (это при работающих 7 и 9) - говорит, что какая-то ошибка, но я понять не могу, потому что не вижу, о какой строчке речь.