Шаблон:Map/Документация

Материал из Lurkmore

Перейти к: навигация, поиск
Шаблон:Mape p h Документация Обсуждение Где используется

Шаблон, работающий по принципу одноимённого HTML-тэга. Представляет возможность делать определённые участки изображения кликабельными ссылками (tooltip в комплекте).

Содержание

Параметры

  • Первый непоименованный параметр — имя файла (изображения).
  • width — ширина изображения и всей области. Необязателен к указанию (по умолчанию 800 пикселей).
  • align — выравнивание по горизонтали (left, right, center). Необязателен к указанию (по умолчанию center).
  • borderless — отключает рамку, вводный текст и ссылку на страницу изображения; помещает изображение в текст «как есть» (по умолчанию отключено).
  • Второй непоименованный параметр — место для вставки подшаблона(ов) {{area}}: собственно областей. Синтаксис подшаблона area:
{{area|ссылка на статью|X|Y|ширина|высота|z-index|[external]}}. Задаются как непоименованные — то бишь по очереди.
  • ссылка на статью — обязательный параметр.
  • X, Y — координаты в пикселях относительно верхнего левого угла изображения (по умолчанию: [0, 0]). Области за пределами изображения будут обрезаны, и в общий массив попадут только те их участки, что залезают в изображение (другими словами, отрицательные или бо́льшие, чем само изображение, координаты бесполезны).
  • ширина, высота — области, нафф сейд (по умолчанию: [10px, 10px]). Размеры области, превышающие изображение, также бесполезны.
  • z-index — Z-координата, или приоритет области по отношению к другим, залезающим на неё. Область с более высоким z-index будет перекрывать лежащие под ней (по умолчанию: 1; меньше единицы быть не может).
  • Ну а для внешних ссылок можно использовать ключ external

Tutorial

Есть несколько способов управления данным шаблоном:

  1. Во-первых, надо создать саму область: для этого в статье, где предполагается использование, поместите map с изображением и нажмите «предварительный просмотр», например: 
{{map|1196147039477.jpg|width=400|<!--
 
-->}}
Результатом будет некликабельное изображение:
Поместите курсор мыши над интересующей Вас областью.
Magnify-clip.png
1196147039477.jpg
  1. Скопируйте путь к полученному изображению (в данном случае: http://lurkmore.ru/images/thumb/9/99/1196147039477.jpg/400px-1196147039477.jpg, Важно: именно прямую, а не вики-ссылку наподобие http://lurkmore.ru/Файл:1196147039477.jpg). В различных браузерах возможность получать путь к изображению варьируется, но, как правило, доступна через контекстное меню.
  2. Далее возможны следующие варианты:

Если вы владеете HTML и Regexp

  • Создайте в Дримвивере или любом другом редакторе, предоставляющем возможность графической манипуляции HTML-объектов, документ
со следующим текстом: 
<!DOCTYPE html PUBLIC>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css"><!-- div, span { border: 1px dotted #000000; cursor:pointer; font-size: 1px; line-height: 1px; overflow:hidden; position:absolute; } --></style>
</head>
<body>
 
<div style="position:relative; top:0px; left:0px; cursor:default">
 
<img src="http://lurkmore.ru/images/thumb/9/99/1196147039477.jpg/400px-1196147039477.jpg" />
 
<div style="width: 91px; height: 306px; left: 134px; top: 93px; z-index: 1" title="Славя-тян"></div>
<div style="width: 49px; height: 96px; left: 83px; top: 229px; z-index: 1" title="Славя-тян"></div>
<div style="width: 120px; height: 147px; left: 195px; top: 251px; z-index: 2" title="Уныл-тян"></div>
<div style="width: 83px; height: 98px; left: 215px; top: 155px; z-index: 2" title="Уныл-тян"></div>
 
</div>
</body></html>
  • Замените ссылку в тэге <img> на скопированную выше в пункте №2 и обновите дизайнерский вид.
    В результате вы должны получить что-то такое: 
    Zldanq.png
  • Разместите все области посредством тэгов <div>, определяя будущую вики-ссылку в атрибуте title, и не забывайте, что z-index отвечает за приоритет при перекрывании областей друг другом.
  • Прогоните весь блок тэгов <div> через Regexp (вот готовый шаблон)
    <[^\s>]+ *(?:style *= *"(?: *width *: *(\d+)px; *| *height *: *(\d+)px; *| *left *: *(\d+)px; *| *top *: *(\d+)px; *| *z-index *: *(\d+) *){5}" *| *title *= *"(.*)" *){2} *>[^<]*</[^\s>]+ *>
    и маской замены
    -->{{area|$6|$3|$4|$1|$2|$5}}<!--
  • Результатом будет нечто подобное (<!-- --> теоретически необязательны, но лучше пусть будут): 
-->{{area|Славя-тян|134|93|91|306|1}}<!--
-->{{area|Славя-тян|83|229|49|96|1}}<!--
-->{{area|Уныл-тян|195|251|120|147|2}}<!--
-->{{area|Уныл-тян|215|155|83|98|2}}<!--
  • Вставьте полученный блок в созданный ранее map и получите ↓результат↓

Если вы лох хотите попроще

Способ не требует особых навыков, но будет стоить сотни геморроя при большом количестве областей.

  • Откройте ссылку, скопированную выше в пункте № 2, в любом графическом редакторе/вьювере, дающем возможность выделять область изображения и получать её координаты и размер.
    Например, Фотошоп или IrfanView 
    B5kw0g-1-.png
  • Изображение будет скачано в temp и показано в программе. Начните выделять области и копировать данные.
    В IrfanView они будут показаны в заголовке окна: 
    2a64cie-1-.jpg
  • Добавляйте новые области с новыми сетами данных ({{area|ссылка на статью|X|Y|ширина|высота|z-index}}) и не забывайте, что если область i перекрывает область j, последняя цифра в сете должна быть на единицу больше, чем у j. 
{{map|1196147039477.jpg|width=400|<!--
-->{{area|Славя-тян|136|93|75|307|1}}<!--
-->{{area|Славя-тян| | | | | }}<!--
-->}}

Результат 

{{map|1196147039477.jpg|width=400|<!--
-->{{area|Славя-тян|134|93|91|306|1}}<!--
-->{{area|Славя-тян|83|229|49|96|1}}<!--
-->{{area|Уныл-тян|195|251|120|147|2}}<!--
-->{{area|Уныл-тян|215|155|83|98|2}}<!--
-->}}
  •  ???
Поместите курсор мыши над интересующей Вас областью.
Magnify-clip.png
1196147039477.jpg

Или без рамки, чистым изображением: 

{{map|1196147039477.jpg|width=400|borderless=1|<!--
-->{{area|Славя-тян|134|93|91|306|1}}<!--
-->{{area|Славя-тян|83|229|49|96|1}}<!--
-->{{area|Уныл-тян|195|251|120|147|2}}<!--
-->{{area|Уныл-тян|215|155|83|98|2}}<!--
-->}}
  •  ???
1196147039477.jpg


Источник — «http://lurkmo.re/%D0%A8%D0%B0%D0%B1%D0%BB%D0%BE%D0%BD:Map/%D0%94%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D0%B8%D1%8F»