логин: 
<< предыдущая заметкаследующая заметка >>
09 января 2013
Интересная заставка

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


В принципе ничего сложного: берешь картинку (большую, мы ее по размеру экрана автоматически уменьшим), идешь на сайт удобного редактора 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) - говорит, что какая-то ошибка, но я понять не могу, потому что не вижу, о какой строчке речь.

<< предыдущая заметка следующая заметка >>
пожаловаться на эту публикацию администрации портала
Страницы, которые привлекли мое внимание за последние дни, рекомендую:
2017-11-22 В июне 1982
архив ссылок
Оставить комментарий
Linux Firefox
1
0
Oreolek
Квесты!
Windows Firefox
 Санкт-Петербург
0
0
[email protected]Кошак (cats-shadow)
Хм... А ведь это - мысль! :)
Windows Safari Chrome
0
0
philip.borisov
Спасибо за редактор карт ссылок ^_^
Windows Firefox
 Санкт-Петербург
0
0
[email protected]Кошак (cats-shadow)
Мда... Первый блин - комом. :)
Правильно ли я понимаю, что скрипт в пост можно вставить при помощи модуля "SCRIPTS" или копировать как есть?
Для примера пробовал вставить то, что в этом посте в пробный у себя. Картинка не отмасштабировалась и на положение курсора мыши не реагирует.
Linux Firefox
 Москва
0
0
Leonid Kaganov
Да как есть можно копировать, там же тэг 'script' стоит.
При этом в настройках заметки надо обязательно указать, чтоб движок не делал форматирования и не заменял кавычки.
Windows Firefox
 Санкт-Петербург
0
0
[email protected]Кошак (cats-shadow)
Ага! Заработало! (я про замену кавчек забыл).
В результате картинка занимает все окно броузера. А как организовать - чтоб в пост помещалась (не меняя стороннего оформления - как тут)?
Отдельный фрейм, куда картинка выводится?
И как бы отловить изменение размера окна вывода и масшабировать картинку по наиболее короткой стороне окна?
Linux Firefox
 Москва
0
0
Leonid Kaganov
Ну... Там сейчас система такая: берется размер экрана по ширине и выставляется картинке в качестве размера Х. А с учетом получившегося коэффициента k картинка масштабируется по Y, а также пересматриваются все координаты точек coords во всех строках map - тоже согласно коэффициенту k. Это все в скрипте.
Windows Firefox
 Санкт-Петербург
0
0
[email protected]Кошак (cats-shadow)
Ага. Переписал скрипт в меру своего непонимания JS. :) Работает. Только не соображу как отловить изменение размера и перегрузить страницу, не правя шаблон.

А вот с выводом в фрейм... Глянул в исходникый код тутошней страницы - так тут в iframe выводится другой сайт... А я голову ломаю - почему у меня картинка шаблон игнорирует при выводе... Ларчик-то просто открывался. :)
Linux Firefox
 Москва
0
0
Leonid Kaganov
А как часто ты собираешься менять размер экрана браузера?!
Windows Firefox
 Санкт-Петербург
0
0
[email protected]Кошак (cats-shadow)
В том-то все и дело, что не знаю "как собираюсь". :)
В "обычной жизни" размер окна броузера у меня меняется не то, чтобы постоянно, но достаточно часто.

Мне идея с квестом/интерактивным комиксом понравилась, высказанная в одном из первых комментов. Подумалось для мелких нарисовать попробовать. Выводить подобную картинку с картой в фрейм и подписи ниже (как в диафильме, только с ветвлением, а не линейно и фиксировано, как на плёнке).
Linux Firefox
 Москва
0
0
Leonid Kaganov
Отлавливай изменение экрана и производи переосмысление контента по этому событию, чо:

window.onresize=function(){
alert('Ой, ой, изменился размер экрана, теперь ширина = '+document.body.clientWidth);
};
Linux Firefox
 Москва
0
0
Leonid Kaganov
А квест - надо еще и музыку. Я сейчас вставил, чтобы при наведении на объекты говорило "куку".

Но в принципе можно сделать, чтобы оно брало аудиоролик из тэга alt, например.
Windows Safari Chrome
0
0
ln (#2592417)
В хроме, если нажать на элемент, перебросит на 404, потом нажать в браузере «назад» — картинка опять появляется, но скрипт вроде перестаёт работать, это баг или так и должно быть?
Linux Firefox
 Москва
0
0
Leonid Kaganov
Да вроде бы не должен перестать работать, с чего бы вдруг?
Linux Ubuntu Firefox
0
0
meequz
Я кликнул по "портрет", появилась 404, нажал "назад". Теперь на картинке подсвечиваются все элементы, кроме портрета.
Linux Firefox
 Москва
0
0
Leonid Kaganov
От себя могу сказать, что ошибка 404 должна быть, потому что никакие страницы по этим ссылкам никто пока не создавал.

А вот все остальное - целиком и полностью на совести разработчиков браузера. Чтоб один и тот же скрипт на одной и той же странице работал по-разному в зависимости от того, напрямую туда зашли или ушли и снова вернулись... это повод сильно пинать разработчиков браузера ;)
Linux Ubuntu Firefox
0
0
meequz
Попробовал снова - всё, глюка больше нет. Но первый раз он точно был.

P.S. Офигеть! Мне впервые из этого дневника пришло уведомление об ответе на почту! It's a magic!
Linux Firefox
 Москва
0
0
Leonid Kaganov
Ну в любом случае это не мой глюк ;)
Linux Firefox
 Москва
0
0
Leonid Kaganov
Вы бы лучше рассказали какую-нибудь печаль про Эксплорер. Я правильно понимаю, что в нем не работает?
Linux Ubuntu Firefox
0
0
meequz
Я не off_base, если что, не знаю, почему движок меня им назвал.
IE под рукой нет, у меня же "Linux Ubuntu Firefox". Но в принципе могу установить в Crossover'е, если надо. Там есть 7 и 8 версии.
Linux Firefox
 Москва
0
0
Leonid Kaganov
Пугаете.
Кто и кого где и как назвал?
Эти глюки были давным-давно побеждены, базы пользователей сбиваться не могут.
Linux Ubuntu Firefox
0
0
meequz
В realname было записано: off_base. Всё остальное верно. Исправил на meequz. В /dnevnik такого не помню, а вот в /blog, видимо, с прошлых времён осталось.
Linux Firefox
 Москва
0
0
Leonid Kaganov
В прошлые времена всякое бывало... Когда некоторое время работали на сайте три движка, выдавая куку с одним именем и областью действия на весь сайт... Душевной болью и седыми волосами расхлебывал я этот ад... :)
Windows Safari Chrome
0
0
В IE не работает
Linux Firefox
 Москва
0
0
Leonid Kaganov
А как именно? Не показывает картинку? Показывает картинку маленького размера? Не переходит по ссылкам в нужных местах? Или просто не подсвечиваются объекты?
Windows Safari Chrome
0
0
Позавчера в IE8 картинка не отображалась совсем. Не могу сейчас проверить, сегодня не в офисе
Linux Opera
 Москва
0
0
Leonid Kaganov
с позавчера скрипт сто раз поменялся :) и не только он - теперь в движке в ИЕ должны быть и всплывающие подсказки, как в других браузера
Windows Firefox
0
0
D.iK.iJ
В ИЕ 8 работает, но подсветки нет :)
Даже подсказки выводит. Но вот залогиниться не смог.
Linux Firefox
 Москва
0
0
Leonid Kaganov
В IE до 9 нет поддержки работы с графикой SVG, поэтому подсветка сложных объектов невозможна (ну, если конечно не нарисовать отдельные картинки-заглушки в Фотошопе, но я такой мартышкин труд очень не люблю).
Windows Firefox
0
0
D.iK.iJ
Работает везде, кажется. Только с растягиванием картинки нужно что-то сделать. Зато рамки не сбиваются :)
Ну и кроссбраузерно насколько я понял. Да и делается довольно просто.

<html><head><style>
.pod {position:absolute; border: 1px #666666 dotted;}
.pod:hover{position:absolute; background-color: #DDDDDD; border: 1px #DDDDDD dotted;filter: alpha(Opacity=50); opacity: 0.5;}
</style></head><body>
<img src="http://lleo.me/blog/2013/berezin/komnata.jpg" width="100%" height="100%">
("#okno" style="width:34%; height:50%; top:13%; left:5%;" class="pod" title="Окно")
("#kartina" style="width:14%; height:26%; top:4%; left:66%;" class="pod" title="Картина")
("#stol" style="width:60%; height:33%; top:63%; left:18%;" class="pod" title="Стол")
("#pk" style="width:25%; height:17%; top:50%; left:40%;" class="pod" title="Компьютер")
</body></html>
Linux Firefox
 Москва
0
0
Leonid Kaganov
А тут я не понял. Что это такое, и что должен делать этот странный код? Расставлять по картинке прямоугольные квадратики что ли? Но это некрасиво.
Windows Firefox
0
0
D.iK.iJ
Да, расставляет квадратики невидимые и подсвечивает их при наведении. Ну и прозрачные они еще на 50%. Не так красиво, но коротко и работает в ИЕ. В остальных браузерах где проверил - тоже.
Linux Firefox
 Москва
0
0
Leonid Kaganov
Ну так и у меня сейчас работает в IE.

А квадраты - это не объекты со сложной геометрией, это некрасиво.
Windows Safari Chrome
0
0
ln (#2592417)
Теперь в хроме стало нормально работать вроде, если переходить вперёд и назад, но рамочка стала чуть больше изображения (http://imgur.com/B3yRI).
В ИЕ8 не очень понятно, что за ошибка, 53 вроде пустая строка http://imgur.com/8IUJ2
Но вообще работает, но без подсветки.
Windows Firefox
0
0
SelenIT (#2669370)
Извиняюсь за занудство, но должен уточнить: строчка ‹!doctype html› включает не мифический «режим совместимости HTML5», а самый обычный режим поддержки стандартов (насколько браузер вообще это умеет). В противовес режиму обратной совместимости, в котором любой IE фактически превращается в IE5.5. Ровно то же самое делает любой старый доктайп со словом Strict, но новый писать и запомнить проще:)
Mac Safari
0
0
Еру Дфцнук (#2671174)
Мебель какая шикарная!

всего комментариев: 36

<< предыдущая заметка следующая заметка >>