Блог Bingam

Дек/10

15

Создание интерактивной карты

В медиавике есть множество интересных возможностей. Так, например, можно создать интерактивную карту, на которой поверх любой картинки строго по координатам мы разместим текст-ссылки.

Нам понадобится:
1) изображение,
2) код,
3) создание страницы шаблона и страницы с изображением,
4) установка специального расширения.

Перво-наперво установите расширение (перехватчик синтаксического анализатора) — SyntaxHighlight GeSH.

Для этого скачайте его с официального сайта и добавьте в папку Extension. Затем откройте файл LocalSettings.php и вставьте туда следующие две строки:

{code type=php}
require_once(«$IP/extensions/SyntaxHighlight_GeSHi/SyntaxHighlight_GeSHi.php»);
$wgSyntaxHighlightDefaultLang = «c»;
{/code}

Шаг второй — загрузите любое фоновое изображение, например, формата  jpg или gif . (Я загружала карту Map2.gif).

———

Шаг третий — создайте страницы: 1— с шаблоном {{Image label}}, и 2-ую, где будет карта.

На первой странице Image label (это название страницы) с шаблоном {{Image label}} надо написать:

{code type=html}

{{{text}}}

{/code}

Сохраните страницу Image label.

Теперь создайте страницу с изображением. Вот как это выглядит у меня:

{code type=html}

[[Файл:Map2.gif|700px]]
{{Image label|x=0.30 |y=0.045 |scale=700|text=[[Ванахейм|● Ванахейм]]}}
{{Image label|x=0.47 |y=0.05 |scale=700|text=[[Асгард|● Асгард]]}}
{{Image label|x=0.96 |y=0.4 |scale=700|text=[[Кхитай|● Кхитай →]]}}
{{Image label|x=0.41 |y=0.737|scale=700|text=[[Стигия|● Стигия]]}}
{{Image label|x=0.46 |y=0.76|scale=700|text=[[Чёрные королевства|● Чёрные королевства]]}}
{{Image label|x=0.23|y=0.35 |scale=700|text=[[Аквилония|● Аквилония]]}}
{{Image label|x=0.35 |y=0.21 |scale=700|text=[[Киммерия|● Киммерия]]}}
{{Image label|x=0.117 |y=0.259 |scale=700|text=[[Пиктские пустоши|● Пиктские пустоши]]}}
{{Image label|x=0.47 |y=0.263 |scale=700|text=[[Пограничное королевство|● Пограничное королевство]]}}
{{Image label|x=0.58|y=0.150|scale=700|text=[[Гиперборея|● Гиперборея]]}}
{{Image label|x=0.72 |y=0.31 |scale=700|text=[[Туран|● Туран]]}}
{{Image label|x=0.50 |y=0.55 |scale=700|text=[[Коф|● Коф]]}}
{{Image label|x=0.53 |y=0.60 |scale=700|text=[[Хорайя|● Хорайя]]}}
{{Image label|x=0.67 |y=0.53 |scale=700|text=[[Хауран|● Хауран]]}}
{{Image label|x=0.43 |y=0.64 |scale=700|text=[[Шем|● Шем]]}}
{{Image label|x=0.95 |y=0.65 |scale=700|text=[[вендия|● Вендия →]]}}
{{Image label|x=0.35 |y=0.47 |scale=700|text=[[Офир|● Офир]]}}
{{Image label|x=0.48 |y=0.459 |scale=700|text=[[Коринфия|● Коринфия]]}}
{{Image label|x=0.63 |y=0.43 |scale=700|text=[[Замора|● Замора]]}}
{{Image label|x=0.93 |y=0.23 |scale=700|text=[[Гиркания|● Гиркания]]}}
{{Image label|x=0.41 |y=0.35 |scale=700|text=[[Немедия|● Немедия]]}}
{{Image label|x=0.54 |y=0.32 |scale=700|text=[[Бритуния|● Бритуния]]}}
{{Image label|x=0.1 |y=0.49 |scale=700|text=[[Зингара|● Зингара]]}}
{{Image label|x=0.21 |y=0.56 |scale=700|text=[[Аргос|● Аргос]]}}

{/code}

Map2.gif — это имя изображения , 700 пикселей — размер.

X / Y

X и Y имеют значения от 0 до 1. Они представляют собой проценты от ширины и высоты, соответственно, там будет размещена координата. Начало — X=0 и Y=0 находится в верхнем левом углу изображения.
Посмотрите результат:

Ссылки:

http://en.wikipedia.org/wiki/Template:Image_label

Поделиться в соц. сетях

Опубликовать в Google Buzz
Опубликовать в Google Plus
Опубликовать в LiveJournal
Опубликовать в Мой Мир
Опубликовать в Одноклассники

·

Еще нет комментариев.

Написать коммент

«

»

© 2010-2020 Bingam personal site

Theme Design by devolux.nh2.me

Статистика

Locations of visitors to this page
Яндекс.Метрика

Баннеры

Valid Robots.txt
Наверх