127.0.0.1 в 14:35, 13 июля 2017

2017-07-13T14:35:24Z

← Предыдущая версия	Версия от 14:35, 13 июля 2017
(нет различий)

127.0.0.1 в 14:35, 13 июля 2017

2017-07-13T14:35:24Z

Новая страница

{{docpage}}

Шаблон, работающий по принципу [http://www.w3schools.com/tags/tag_map.asp одноимённого HTML-тэга]. Представляет возможность делать определённые участки изображения кликабельными ссылками (tooltip в комплекте).

== Параметры ==
* Первый непоименованный параметр — имя файла (изображения).
* <code>width</code> — ширина изображения и всей области. Необязателен к указанию (по умолчанию 800 пикселей).
* <code>align</code> — выравнивание по горизонтали (<code>left</code>, <code>right</code>, <code>center</code>). Необязателен к указанию (по умолчанию <code>center</code>).
* <code>borderless</code> — отключает рамку, вводный текст и ссылку на страницу изображения; помещает изображение в текст «как есть» (по умолчанию отключено).
* Второй непоименованный параметр — место для вставки подшаблона(ов) {{tp|area}}: собственно областей. Синтаксис подшаблона area:
<div style="margin-left: 2em;">{{:Шаблон:Area/Документация}}</div>

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

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

=== Если вы владеете HTML и [[Regexp]] ===
* Создайте в Дримвивере или любом другом редакторе, предоставляющем возможность графической манипуляции HTML-объектов, документ
{{NSFW|1=со следующим текстом: |2=<nowiki></nowiki>
<source lang="xml">
<!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"></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>
</source>
}}
* Замените ссылку в тэге <code><img></code> на скопированную выше в пункте №2 и обновите дизайнерский вид. {{NSFW|1=В результате вы должны получить что-то такое: |2=<nowiki></nowiki>[[Файл:Zldanq.png]]}}
* Разместите '''все''' области посредством тэгов <code><nowiki><div></nowiki></code>, определяя будущую вики-ссылку в атрибуте <code>title</code>, и не забывайте, что <code>z-index</code> отвечает за приоритет при перекрывании областей друг другом.
* Прогоните весь блок тэгов <code><nowiki><div></nowiki></code> через Regexp (вот [http://regexr.com?2tb83 готовый шаблон])<br /><code><nowiki><[^\s>]+ *(?:style *= *"(?: *width *: *(\d+)px; *| *height *: *(\d+)px; *| *left *: *(\d+)px; *| *top *: *(\d+)px; *| *z-index *: *(\d+) *){5}" *| *title *= *"(.*)" *){2} *>[^<]*</[^\s>]+ *></nowiki></code><br />и маской замены<br /><code><nowiki>-->{{area|$6|$3|$4|$1|$2|$5}}</nowiki><nowiki><!</nowiki>--</code>
* Результатом будет нечто подобное (<code><nowiki><!</nowiki>-- --></code> теоретически необязательны, но лучше пусть будут):
<source lang="text">-->{{area|Славя-тян|134|93|91|306|1}}{{area|Славя-тян|83|229|49|96|1}}{{area|Уныл-тян|195|251|120|147|2}}{{area|Уныл-тян|215|155|83|98|2}}{{area|Славя-тян|136|93|75|307|1}}{{area|Славя-тян| | | | | }}}}
</source>

=== Результат ===
<source lang="text">
{{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}}}}
</source>
* ???
{{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}}}}

Или без рамки, чистым изображением:
<source lang="text">
{{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}}}}
</source>
* ???
{{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}}}}

<includeonly>[[Категория:Lurkmore:Шаблоны:Форматирование]]</includeonly>

Шаблон:Map/Документация - История изменений

127.0.0.1 в 14:35, 13 июля 2017

127.0.0.1 в 14:35, 13 июля 2017