Шаблон:Map

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

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

---

Шаблон, работающий по принципу одноимённого 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 с изображением и нажмите «предварительный просмотр», например:

<source lang="text">

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

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

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

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

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

• Создайте в Дримвивере или любом другом редакторе, предоставляющем возможность графической манипуляции HTML-объектов, документ

со следующим текстом: 

<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>

<img src="http://lurkmore.ru/images/thumb/9/99/1196147039477.jpg/400px-1196147039477.jpg" />

</body></html>

</source>

• Замените ссылку в тэге <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}}<!--
• Результатом будет нечто подобное (<!-- --> теоретически необязательны, но лучше пусть будут):

<source lang="text">-->

}}

</source>

Результат

<source lang="text">

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

</source>

• ???

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

Или без рамки, чистым изображением: <source lang="text">

</source>

• ???