Справка:Как добавить изображения

Материал из Tiarum
Перейти к: навигация, поиск

Общие сведения

Содержание

Лучше один раз увидеть, чем сто раз... прочитать.

Иллюстрации, рисунки, скриншоты и другие графические изображения весьма полезны при создании ваших страниц.

Хорошо выполненные иллюстрации и грамотное их расположение на странице радуют глаз. Но, как и во всем остальном, необходимо иметь чувство меры. Слишком большие иллюстрации и/или большое их количество "утяжелят" вашу страницу, что непременно скажется на скорости ее загрузки.

Данная статья поможет вам разобраться в форматировании изображений для вики с помощью специальной вики-разметки.

Загрузка изображений

Изображения, прежде чем они отобразятся на вики-странице, должны быть предварительно загружены.

Для этого в панели "Инструменты", которая находится в левой части окна браузера, в самом низу, выберите пункт "Загрузить файл".

Поддерживаемые типы файлов:

Для нормального отображения на странице графический файл изображения должен иметь одно из следующих расширений: png, gif, jpg, jpeg.
Собственно, именно эти расширения, наряду с некоторыми другими, например, архивами и pdf, разрешены для загрузки.

Простые изображения

Наиболее простая конструкция для вставки картинки на страницу имеет следующий синтаксис:

[[image:ImperialSity.jpg]]

Здесь ImperialSity.jpg - загруженный ранее файл.

После вставки кода в нужном месте окна редактирования и нажатии кнопки "Предварительный просмотр" картинка станет видимой:

ImperialSity.jpg

Отступ от края

Если необходимо, чтобы картинка была отодвинута от края страницы, например, в списках, поставьте перед кодом двоеточие (или несколько):

:[[WolfsonAwa.jpg]]
WolfsonAwa.jpg
::[[image:WAYY 20.gif]]
WAYY 20.gif

Размещение изображения в правой или левой части страницы

Для этого достаточно добавить в код ключевые слова "right" (справа) или "left" (слева).

При их использовании обеспечивается обтекаемость изображений текстом.

Пример кода с тегом "right":

[[image:MG_banner.gif|right]]

Результат:

MG banner.gif

Гильдия Магов – межрегиональная организация, во главе которой стоит "Совет Пяти Архимагов". История создания гильдии описана в игровой книге "Истоки Гильдии Магов". Деятельность гильдии заключается в изучении и практическом применении магии и алхимии. Студенты гильдии создали множество самых разнообразнейших зелий и магических предметов, которые можно купить по доступным ценам. Также гильдия предлагает на продажу всевозможные стандартные заклинания и ингредиенты. Дополнительно гильдия предлагает для использования различные готовые технологии всем желающим создать свои магические заклинания.

Пример кода с тегом "left":

[[image:SI main 01.gif|left]]

Результат:

SI main 01.gif
Оригинальный TES 4: Oblivion подарил нам множество часов захватывающей игры, множество вариантов ее прохождения, отличное полотно для модмейкеров, интереснейшие квесты и потрясающую графику. Но самым главным подарком стал большой мир, в котором можно просто жить. В этом мире можно путешествовать между городами, попадать в переделки, быть участником захватывающих приключений, а можно приобрести домик где-то в горах и мирно собирать ингредиенты для новых снадобий. Но человек так устроен, что рано или поздно ему все надоедает - так и Киродиил стал уже до боли знакомым местом. Вряд ли кто-то не согласится, что это красивейшая провинция Тамриэля, но всё в жизни требует перемен, пусть и кратковременных. Именно с этой целью Bethesda выпустила официальный аддон для Обливиона под названием «Дрожащие острова».

Если же обтекаемость текстом не нужна и изображение должно находиться в левой части, укажите тег "none":

[[image:OblivionLibrary.jpg|none]]
OblivionLibrary.jpg

Простое масштабирование изображений

Если необходимо увеличить или уменьшить какую-нибудь иллюстрацию в статье относительно исходного размера, вы можете добавить специальный код.
Масштабирование производится по ширине.

Пример 1. Уменьшение в два раза по ширине:


Например, ваша картинка OBbsign_Lover.jpg имеет исходный размер 512 × 400. Здесь 512 - ширина картинки в пикселах, а 400, соответственно, ее высота.

Код:

[[image:OBbsign Lover.jpg|256px]]

В результате получим:

OBbsign Lover.jpg

Пример 2. Увеличение по ширине на 30 пикселов:


Исходное изображение в файле Pgtte_v3_birthsign_apprentice.jpg имеет размер 256 × 217 пикселов. Допустим, требуется увеличить немного его размер, чтобы уравнять по высоте с соседним изображением, например, на 30px.

Код:

[[image:Pgtte_v3_birthsign_apprentice.jpg|286px]]

Результат:

Pgtte v3 birthsign apprentice.jpg

Миниатюры изображений (тег thumb)

Если добавить в код после названия файла вертикальную черту "|", а затем слово "thumb", то автоматически создастся миниатюра данного изображения, обзаведется рамкой и переместится в правую часть страницы.
При этом обеспечивается обтекание ее текстом слева.


Пример: Использование тега "thumb"


Синтаксис:
[[image:ObBook-fiction dancefire center.jpg|thumb]]

Результат:
ObBook-fiction dancefire center.jpg

Задание размера миниатюры


Размер создаваемой миниатюры можно задавать, если после тега "thumb" поставить вертикальную черту "|" и указать размер в пикселях, например, такой - 250px.

  • Примечание: Увеличить таким образом размер изображения сверх оригинального не удастся. Можно только уменьшить. На то она и миниатюра...

Ниже в качестве примера приведен исходный код:

[[image:ObBook-fiction dancefire center.jpg|thumb|250px]] Текст статьи...

Результат:

ObBook-fiction dancefire center.jpg

Танец в огне, глава I

Вогин Джарт
Место: Имперский город, Сиродил
Дата: 7 Начала морозов, 3E 397

Кажется, Строительная комиссия Атриуса всегда размещалась в этом внушительном здании. Через руки служащих и агентов компании проходили бумаги, связанные со строительством практически каждого дома в Империи. Особняк был построен двести пятьдесят лет назад, в эпоху правления императора Магнуса - простое и строгое здание, расположившееся на небольшой площади в престижном районе Имперского города. Здесь работали энергичные и честолюбивые юноши и девушки из среднего класса, а также солидные господа среднего возраста, вроде Декумуса Скотти. Никто не мог представить себе мир без комиссии, и меньше всех Скотти. Если точнее, он не мог представить себе мир без себя в комиссии.

Задание положения миниатюры в левой части страницы


Миниатюру можно расположить и в левой части страницы. Обеспечивается это двумя тегами - "left" и "none".

Первый позволит тексту обтекать рисунок, а второй - нет.

Тег "left"


Чтобы расположить миниатюру в левой части страницы, укажите в коде ключевое слово - "left", разделив теги вертикальной линией:

[[image:Redguard-EliteGoblin2.gif|thumb|left|122px]] Такая конструкция <br>обеспечивает обтекаемость <br>изображения текстом, <br>но на этот раз справа.

Результат:

Redguard-EliteGoblin2.gif
Такая конструкция
обеспечивает обтекаемость
изображения текстом,
но на этот раз справа.



Тег "none"


Если обтекаемость миниатюры текстом не нужна, вместо тега "left" укажите тег "none":

[[image:Morrowind-Quest-Coded Message.jpg|thumb|none|160px]] Как видите, текст расположился ниже изображения.

Результат:

Morrowind-Quest-Coded Message.jpg
Как видите, текст расположился ниже изображения.

Задание положения миниатюры по центру страницы


Если требуется разместить рисунок по центру страницы, добавьте в код тег "center":

[[image:Biped CAT PuppetShop Rig.png|thumb|center|180px]]

Результат:

Biped CAT PuppetShop Rig.png

При расположении картинки по центру обтекаемость текстом исключается, что, в общем-то, понятно.

Подпись к миниатюре


Очень полезно делать подписи к вашим изображениям, нумеровать рисунки и т.п.
Делается это очень просто:

[[image:OB-KotN-PelinalPainting.jpg|thumb|250px|none|Иллюстрация к книге: "Песнь о Пелинале"]]

Результат:

Иллюстрация к книге: "Песнь о Пелинале"

Рамка (тег frame)

Иногда масштабирование не требуется, но зато нужно обрамить рисунок или иллюстрацию рамкой.
Для этого нужно заменить тег "thumb" на "frame" и убрать размер по ширине:

[[image:DaggerfallSpider.gif|frame]] При таком коде изображение <br>перемещается вправо, а слева <br>обеспечивается обтекаемость <br>его текстом.

Результат:

DaggerfallSpider.gif
При таком коде изображение
перемещается вправо, а слева
обеспечивается обтекаемость
его текстом.

Чтобы расположить изображение слева, добавьте тег "left":

[[image:DaggerfallSpider.gif|frame|left]] Такой код перемещает <br>изображение влево, а <br>справа обеспечивается <br>обтекаемость его текстом.

Результат:

DaggerfallSpider.gif
Такой код перемещает
изображение влево, а
справа обеспечивается
обтекаемость его текстом.

Собственно, в отношении тега "frame" справедливы все описанные ранее теги - "left", "right", "none", за исключением задания ширины (этот параметр попросту игнорируется). Также доступна подпись к рисунку.

Пример:

[[image:ObBook night falls.jpg |frame|none|Рис.1. Иллюстрация к книге "Ночь приходит в Сентинель"]]

Результат:

Рис.1. Иллюстрация к книге "Ночь приходит в Сентинель"

Если хотите выделить подпись жирным и разместить по центру, используйте следующий код:

[[image:ObBook night falls.jpg |frame|none|<center>'''Рис.1. Иллюстрация к книге "Ночь приходит в Сентинель"'''</center>]]

Результат:

Рис.1. Иллюстрация к книге "Ночь приходит в Сентинель"

Размещение нескольких картинок в ряд

Для этого не стоит пользоваться тегами "left", "right", "none" и "center" - все равно ваши картинки разлезутся по всему экрану.

Если не нужна рамка, просто расположите коды картинок в один ряд:

[[image:SptMn 05.jpg|180px]] [[image:SptMn 04.jpg|180px]] [[image:SptMn 03.jpg|180px]]

Результат:

SptMn 05.jpg SptMn 04.jpg SptMn 03.jpg

Если иллюстрации нуждаются в подписях, рамках и других "усовершенствованиях", используйте для этой цели галереи и таблицы (см. ниже).

Галереи

Если возникла необходимость разместить в одном месте большое количество миниатюр однотипных изображений, связанных общей тематикой, можно воспользоваться для этого специальным инструментом - галереей. Подробнее о галереях.

Простое использование галереи


Синтаксис галереи в первом приближении достаточно прост:

<gallery>
Файл:1cthief.jpg
Файл:1cserpent.jpg
Файл:1cgolem.jpg
</gallery>

В результате:

Подписи и ссылки


Вы можете также добавить к миниатюрам подписи и ссылки, например:

<gallery>
Файл:1cthief.jpg|Вор
Файл:1cserpent.jpg|Змей
Файл:1cgolem.jpg|[[TES Lore:Двемерская обсерватория - Звёзды|Голем]]
</gallery>

Результат:

Название галереи


Галерее можно дать название и отобразить ее на странице. Код:

<gallery align="center" caption="Созвездия Нирна">
Файл:1ctower.jpg|Башня
Файл:1clady.jpg|Леди
Файл:1cwarrior.jpg|Воин
</gallery>

Результат:

Форматирование галерей


Параметры, с помощью которых можно форматировать галереи:

  • perrow — количество элементов в одной строке
  • widths — размер каждого из изображений по горизонтали
  • heights — размер каждого из изображений по вертикали

Пример:

<gallery perrow=4 widths="180px" align="center" caption="Созвездия Нирна">
Файл:1critual.jpg|Ритуал
Файл:1clover.jpg|Любовник
Файл:1clord.jpg|Лорд
Файл:1cmage.jpg|Маг
Файл:1cshadow.jpg|Тень
Файл:1csteed.jpg|Конь
Файл:1capprentice.jpg|Ученик
Файл:1cwarrior.jpg|Воин
Файл:1clady.jpg|Леди
Файл:1ctower.jpg|Башня
Файл:1cgolem.jpg|Голем
Файл:1cthief.jpg|Вор
Файл:1cserpent.jpg|Змей
</gallery>

Использование таблиц

Таблицы - один из самых универсальных инструментов вики. Ячейки таблицы можно рассматривать как универсальные контейнеры для содержащейся в них информации. Поскольку содержимое не может выйти за пределы ячейки, таблицы могут использоваться не только для традиционного представления информации в виде столбцов и строк, но и для размещения любой другой информации, таких как рисунки, а то и целые отформатированные страницы с рисунками и другими вложенными таблицами.

Именно таким образом были использованы таблицы в данной статье для демонстрации, например, обтекания рисунков текстом.

Более подробно о таблицах можно прочитать в статье "Как создать таблицу на Tiarum".

В данном разделе будут рассмотрены полезные коды с использованием таблиц для размещения рисунков и иллюстраций.

Простая таблица с рисунком


Код содержит простейшую таблицу, состоящую из одной неотформатированной ячейки:

{|
| [[image:SptMn 01.jpg‎|200px]]
|}

Результат:

SptMn 01.jpg

Таблица с рамкой и рисунком


В предыдущем примере показана простая таблица, не содержащая рамку.
Чтобы ее добавить, используйте, например, класс "wikitable":

{| class="wikitable"
| [[image:SptMn 06.jpg]]
|}

Результат:

SptMn 06.jpg

Таблица с рамкой, рисунком и подписью


Чтобы добавить подпись с рисунком, вместо одной ячейки создайте две, расположенные в одном столбце:

{| class="wikitable"
| [[image:Tears_of_the_Fiend_-_The_Fall_of_Armindale.jpg‎|300px]]
|-
! Иллюстрация к моду [[Oblivion Плагин:Tears of the Fiend|Tears of the Fiend]]
|}

Результат:

Tears of the Fiend - The Fall of Armindale.jpg
Иллюстрация к моду Tears of the Fiend
  • Восклицательный знак в коде приводит к выделению текста жирным и центрированию подписи.
  • Отметьте также, что подобным образом можно создать и заголовок к вашей картинке.

Заголовок к изображению


Ниже показан еще один способ создания заголовка:

{| class="wikitable"
|+ Мод "Tears of the Fiend"
|-
| [[image:Tears of the Fiend - Redemption.JPG‎|300px]]
|-
! Иллюстрация к моду [[Oblivion Плагин:Tears of the Fiend|Tears of the Fiend]]
|}

Результат:

Мод "Tears of the Fiend"
Tears of the Fiend - Redemption.JPG
Иллюстрация к моду Tears of the Fiend

Раскраска и форматирование таблицы


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

Рассмотрим приведенный ниже код:

{| class="wikitable" width="270" style="background:#F1E3C6; font-size:90%; color:white"
|- 
! style="background:#765881"| БАШНЯ ВОЛШЕБНИКА
|- 
| style="background:#5E6E92"| [[image:TES4-Wiztower 01.jpg|264px]]
|-
! style="background:#7D6178"| Скриншот из официального плагина
|}

Здесь:

  • "wikitable" - определенный на вики класс оформления таблиц.
  • style - задание параметров стиля оформления. Отметьте разницу в задании параметров стиля и отдельных тегов. Если фон таблицы должен быть прозрачным, укажите в стиле следующий код: style="background:transparent;"
  • width="270" - ширина таблицы в пикселах.
  • color:white - задание цвета шрифта (белый) всех ячеек таблицы, если в какой-нибудь ячейке или строке не будет переопределен.
  • background:#F1E3C6 - цвет заливки всех ячеек таблицы по умолчанию. Работает, если цвет ячейки не переопределен. В данном случае все цвета переопределены, но в качестве примера это может быть полезным.
  • font-size:90% - масштабирование размера шрифта.
  • background:#765881 - заливка ячейки с заголовком.
  • background:#5E6E92 - задание стиля заливки ячейки с картинкой. Отметьте, что цвет фона ячейки с картинкой подобран близким к ее цветовой тональности.

Смотрим результат:

БАШНЯ ВОЛШЕБНИКА
TES4-Wiztower 01.jpg
Скриншот из официального плагина

Размещение нескольких иллюстраций в ряд


Очень простой способ создания галереи с помощью таблиц.

Код:

{| class="wikitable"
| [[image:Sketch Namira.jpg]]
| [[image:Sketch Peryite.jpg]]
| [[image:Sketch Nocturnal.jpg]]
| [[image:Sketch Molag Bal.jpg]]
|-
| [[image:Sketch Sanguine.jpg]]
| [[image:Sketch Meridia.jpg]]
| [[image:Sketch Mephala.jpg]]
| [[image:Sketch Mehrunes Dagon.jpg]]
|-
| [[image:Sketch Azura.jpg]]
| [[image:Sketch Malacath.jpg]]
| [[image:Sketch Clavicus Vile.jpg]]
| [[image:Sketch Hermaeus Mora.jpg]]
|-
| [[image:Sketch Boethiah.jpg]]
| [[image:Sketch Hircine.jpg]]
| [[image:Sketch Vaermina.jpg]]
| [[image:Sketch Sheogorath.jpg]]
|} 

Результат:

Sketch Namira.jpg Sketch Peryite.jpg Sketch Nocturnal.jpg Sketch Molag Bal.jpg
Sketch Sanguine.jpg Sketch Meridia.jpg Sketch Mephala.jpg Sketch Mehrunes Dagon.jpg
Sketch Azura.jpg Sketch Malacath.jpg Sketch Clavicus Vile.jpg Sketch Hermaeus Mora.jpg
Sketch Boethiah.jpg Sketch Hircine.jpg Sketch Vaermina.jpg Sketch Sheogorath.jpg

Нет никакой сложности в том, чтобы дополнить вашу таблицу с иллюстрациями подписями, заголовком и пр. полезными вещами.

Выравнивание изображений в таблицах по вертикали


Если необходимо, чтобы изображения и текст в таблицах выравнивались не по центру (по умолчанию), а по нижнему или верхнему краю ячеек, то для этого используются теги valign с параметрами "top" (верхний край) и "bottom" (нижний край).

Код:

{| class="wikitable"
|+ '''Таблица. Русские буквицы Скайрима'''
! Буквица
! Файл
! Размеры
! Размер, kB
|- 
! [[Файл:A_letter.png|60px|A]]
| a_letter.png
| 234×196
| 84,9
|- valign="top"
! [[Файл:B_letter.png|50px|B]]
| b_letter.png
| 175×189
| 63,9
|- valign="bottom"
! [[Файл:C_letter.png|60px|C]]
| c_letter.png
| 224×188
| 70,9
|-
! [[Файл:D letter.png|60px|D]]
| valign="top" | d_letter.png
| 270×197
| valign="bottom" | 92,9
|-
|}

Результат:

Таблица. Русские буквицы Скайрима
Буквица Файл Размеры Размер, kB
A a_letter.png 234×196 84,9
B b_letter.png 175×189 63,9
C c_letter.png 224×188 70,9
D d_letter.png 270×197 92,9

Пример сложной таблицы с иллюстрациями


Исходный код: На странице это будет выглядеть так:
{| class="wikitable" width="270" style="background:#F1E3C6; font-size:80%"
|- 
! style="background:#826941; color:white" colspan="4" | ИНФОРМАЦИЯ О КНИГЕ:
|- style="background:#624921"
| colspan="4" | [[image:OblivionLibrary.jpg|264px]]
|-
! style="background:#826941; width:20%; color:white" | ID:
| width="85%" colspan="3"| bk_galerionthemystic
|-
! style="background:#826941; color:white" colspan="4"| Смотрите также:
|-
| colspan="4" |
: [[Morrowind Книга:Galerion The Mystic|'''Morrowind - английская версия''']]
: [[Daggerfall Книга:Галерион Мистик|'''Daggerfall-версия''']] 
: [[Oblivion Книга:Галерион Мистик|'''Oblivion-версия''']]
: [[TES Lore:Галерион Мистик (книга)|'''Lore-версия''']]
|-
! style="background:#826941; width:20%"| [[image:OBValueIcon small.png]]
! style="background:#F1E3C6; width:30%"| 50
! style="background:#826941; width:20%"| [[image:OBWeightIcon_small.png]]
! style="background:#F1E3C6; width:30%"| 3.0
|-
! style="background:#826941; color:white; width:20%"| Квест:
| width="80%" colspan="3"| Нет квеста
|-
! style="background:#826941; color:white" colspan="4"| Локации:
|-
| colspan="4" | 
<center>'''Может быть найдена:'''</center>
: Balmora, Dorisa Darvel: Bookseller
: Balmora, Guild of Mages
: Molag Mar, Redoran Stronghold
: Sadrith Mora, Tel Naga Upper Tower
: Vivec, Guild of Mages
: Wolverine Hall, Mage's Guild
: Other, random loot
|-
|} 
ИНФОРМАЦИЯ О КНИГЕ:
OblivionLibrary.jpg
ID: bk_galerionthemystic
Смотрите также:
Morrowind - английская версия
Daggerfall-версия
Oblivion-версия
Lore-версия
OBValueIcon small.png 50 OBWeightIcon small.png 3.0
Квест: Нет квеста
Локации:
Может быть найдена:
Balmora, Dorisa Darvel: Bookseller
Balmora, Guild of Mages
Molag Mar, Redoran Stronghold
Sadrith Mora, Tel Naga Upper Tower
Vivec, Guild of Mages
Wolverine Hall, Mage's Guild
Other, random loot

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

Внутренние ссылки


Если щелкнуть мышкой по любому изображению, то откроется страница с информацией о данном графическом файле, о статьях, в которых это изображение использовано, о загруженных версиях, исходном размере файла и т.п.

Но иногда требуется, чтобы изображение работало как внутренняя ссылка, то есть, щелчок по нему вызывал другую, указанную в параметрах, страницу.

Для этого используйте следующий код:

[[image:GeckSplash01.jpg|link=:category:Fallout3 GECK]]

Сравните:

Обычное изображение
Изображение со ссылкой

Внешние ссылки


Для того, чтобы изображение работало как внешняя ссылка, можно использовать специальный шаблон - ExtImageLink.

Описание

Шаблон ExtImageLink используется для изображений, которые должны работать в качестве ссылок на внешние источники/сайты/файлы и т.п.

Параметры
  • xsize - данный параметр масштабирует изображение по ширине.
  • ysize - задает область действия по вертикали в пикселах. Имейте в виду, что указываемый размер по вертикали в параметре ysize должен совпадать с отображаемой на экране высотой изображения, иначе область действия ссылки или выйдет за ее пределы, или сделает нижнюю часть изображения неактивной.
  • image - загруженное на вики изображение или баннер.
  • link - ссылка на внешний источник.
Пример использования

Данный пример использует масштабирование (уменьшение) исходного изображения по ширине. При этом параметр ysize подобран таким образом, чтобы он совпадал с высотой отображаемой на экране картинки.

{{ExtImageLink|xsize=500|ysize=60|image=Til logo2007a.jpg|link=http://www.imperial-library.info/|Имперская библиотека}}
Результат
   
image page

Imagemap

Полезное вики-расширение для создания, например, интерактивных карт. В таком случае щелчок мышью по интересующих пользователя объектах или названиях, изображенных на картинке, приведет к открытию соответствующих им статей.

Расширение Imagemap поддерживает также масштабирование с сохранением всех ссылок на своих объектах.

При наведении курсора на нужный объект под курсором отображается подсказка, определенная во второй части ссылки.

Например, в ссылке [[Morrowind:Morrowind|Morrowind]] при наведении курсора отобразится Morrowind.

Параметры
desc Определяет положение ссылки на описание изображения. Возможные варианты: top-right, bottom-right, bottom-left, top-left или none. Помещает голубой значок «i» со ссылкой на страницу описания изображения в выбранный угол. По умолчанию значение параметра bottom-right. Чтобы скрыть ссылку на описание, выберите значение none.
rect Прямоугольник. Параметры — координаты левого верхнего и правого нижнего углов, за ними следует ссылка в квадратных скобках.
circle Круг. Первые два параметра — координаты центра, третий — радиус, за ними следует ссылка в квадратных скобках.
poly Многоугольник. Параметры — координаты углов, за ними следует ссылка в квадратных скобках. Многоугольники должны быть заданы прежде всех других фигур!
default Определяет ссылку по умолчанию в тех местах, где не заданы другие регионы.
Пример

(нажмите на название провинций: Морровинд, Киродиил (Имперская провинция) или Скайрим)

MorrowindOblivionSkyrimКарта Империи Тамриэль
Описание изображения
<imagemap>File:TES_Map_01.jpg|800px|Карта Империи Тамриэль
rect 979 200 1110 225 [[Morrowind:Morrowind|Morrowind]]
rect 562 318 766 371 [[Oblivion:Oblivion|Oblivion]]
rect 740 176 817 198 [[Skyrim:Skyrim|Skyrim]]
# Комментарий. Эта строчка игнорируется
desc bottom-left
</imagemap>

Для определения координат объектов, изображенных на картинке, вы можете использовать онлайн-редактор карт-изображений: ImageMapEdit

В поле URL указывается ссылка на картинку, ширина которой совпадает с номинальной шириной изображения (та, которая указана в свойствах самого изображения), затем нажать "Load". Можно также загрузить картинку непосредственно с компьютера.