Шаблон:Map

Материал из Lurkmore

[просмотр] [править] [история] [обновить]

Документация

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

Содержание

1 Параметры
2 Tutorial

Параметры

Первый непоименованный параметр — имя файла (изображения).
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

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

Во-первых, надо создать саму область: для этого в статье, где предполагается использование, поместите map с изображением и нажмите «предварительный просмотр», например:

{{map|1196147039477.jpg|width=400|<!--
 
-->}}

Результатом будет некликабельное изображение:

Поместите курсор мыши над интересующей Вас областью.

Скопируйте путь к полученному изображению (в данном случае: http://lurkmore.ru/images/thumb/9/99/1196147039477.jpg/400px-1196147039477.jpg, Важно: именно прямую, а не вики-ссылку наподобие http://lurkmore.ru/Файл:1196147039477.jpg). В различных браузерах возможность получать путь к изображению варьируется, но, как правило, доступна через контекстное меню.
Далее возможны следующие варианты:

Если вы владеете 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 и обновите дизайнерский вид.
В результате вы должны получить что-то такое:

Разместите все области посредством тэгов <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

Изображение будет скачано в temp и показано в программе. Начните выделять области и копировать данные.
В IrfanView они будут показаны в заголовке окна:

Добавляйте новые области с новыми сетами данных ({{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}}<!--
-->}}

Поместите курсор мыши над интересующей Вас областью.

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

{{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}}<!--
-->}}

Источник — «https://lurkmo.re/%D0%A8%D0%B0%D0%B1%D0%BB%D0%BE%D0%BD:Map»

Категория: Lurkmore:Шаблоны

Навигация

Категории