Шаблон:Map

Материал из Lurkmore

Перейти к: навигация, поиск
Документация Документация

Шаблон, работающий по принципу одноимённого 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-объектов, документ
  • Замените ссылку в тэге <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, в любом графическом редакторе/вьювере, дающем возможность выделять область изображения и получать её координаты и размер.
  • Изображение будет скачано в temp и показано в программе. Начните выделять области и копировать данные.
  • Добавляйте новые области с новыми сетами данных ({{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