ForumD.ru - Дизайн для форумов, скрипты для форумов, техническая поддержка

Объявление

Загадочный Дом «Кузнечик»

Форумные игры, кино, позитивное отношение и душевное общение!
Есть в мире место, где душе тепло...
Заходи, мы будем тебе рады!

Подробнее

Мийрон

Качественный пиар быстро и недорого.
Красивейшие дизайны по низким ценам.
Каталог ролевых игр.

Подробнее

FD Chat - Чат на вашем форуме

Чат на отдельной странице на форуме. Без регистрации, используются форумные аккаунты.
Стоимость: 1500р
Первым 10 покупателям скидка 20%.

Подробнее

Дизайн «Warlords of Draenor»

Детализированный rpg-дизайн для MyBB форума гильдии «Warlords of Draenor»
Стоимость при покупке эксклюзивно: 6300р
В стоимость входит настройка и корректировка дизайна под ваш проект.

Подробнее

Поддержать проект

Если у вас есть желание помочь нам сделать наш проект лучше:
Реклама на сайтеПредложения
Стать модераторомОтзывы

Подробнее

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.



УРОК: Создаём меп-карту (HTML)

Сообщений 1 страница 10 из 19

1

Копируете/размещаете информацию из этой статьи? ПОЖАЛУЙСТА!!! СТАВЬТЕ ССЫЛКУ НА ЭТУ СТРАНИЦУ и указывайте автора!!!

Урок создавался мной. Так что будет всё написано на понятном русском языке(надеюсь вам это пригодится).

Общий тег навигационной карты

<map>
...
</map>

Далее нужно знать, что области выделения бывают трёх видов:
1. Прямоугольник
2. Круг
3. Многоугольник

Рассматривать будем самый простой-это прямоугольник (определение "rect")

Чтобы показать, что мы хотим присвоить ссылку именно прямоугольнику, пишем так

<map>
<area shape="rect">
</map>

Далее нужно присвоить координаты. Смотрим на рисунок:

Что бы узнать координаты загружаем рисунок в Adobe ImageReady
Подвожу мышку к первым координатам x1y2(отмечено красным квадратиком). В правом верхнем углу увидим координаты точки x1y1:

Подвожу ко вторым x2y2. В правом верхнем углу видим координаты точки x2y2:

Запись координат имеет такой вид:

<map>
<area shape="rect" coords="x1,y1,x2,y2">
</map>

Мой прямоугольник имеет такие координаты:
x1=122
y1=109
x2=449
y2=283

Записываю в код:

<map>
<area shape="rect" coords="122,109,449,283">
</map>

Теперь нужно присвоить ссылку этой области, делаем так:

<map>
<area shape="rect" coords="122,109,449,283" href="https://forumd.ru/">
</map>

Почти всё готово, осталось только связать наш код с картой и дать название:

Даём название карте:

<map name="Map">
<area shape="rect" coords="122,109,449,283" href="https://forumd.ru/">
</map>

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

<img src="https://i.imgur.com/MXj3zH9.jpg" usemap="#Map">
<map name="Map">
<area shape="rect" coords="122,109,449,283" href="https://forumd.ru/">
</map>

Теги: меп-карта,html, урок

Отредактировано Герда (11.11.12 13:04)

+8

2

Aoi Koikawa написал(а):

Урок создавался мной.Так что будет всё написано на понятном русском языке(надеюсь вам это пригодится).

Конечно пригодиться ;) Спасибо, ты клёвый http://i.smiles2k.net/love_smiles/wub1.gif  http://i.smiles2k.net/love_smiles/wub1.gif

http://i.i.ua/cards/pic/3/5/2753.jpg

http://i.smiles2k.net/jumping_smiles/woot_jump.gif  http://i.smiles2k.net/jumping_smiles/woot_jump.gif  http://i.smiles2k.net/jumping_smiles/woot_jump.gif

0

3

я делаю мэп-карты в Adobe Dreamweaver CS3. Там проще))

0

4

МоЕиМя написал(а):

я делаю мэп-карты в Adobe Dreamweaver CS3. Там проще))

Кто как...я просто выложил урок

+1

5

Aoi Koikawa
Спасибо за урок  http://i.smiles2k.net/aiwan_smiles/yahoo.gif

0

6

Пасибки!  http://i.smiles2k.net/aiwan_smiles/derisive.gif
Ток я в фотошопе делала.  http://i.smiles2k.net/aiwan_smiles/biggrin.gif

0

7

Jane Volturi,  а как сделать меп-карту в ФШ?!

0

8

Adobe ImageReady - это и есть фотошоп.
подходит любая программа, которая показывает координаты на рисунке.

Подпись автора

ForumD.ru очень нужны подписчики и социальных сетях и на YouTube!

https://forumstatic.ru/files/0007/e3/f7/42799.png   https://forumstatic.ru/files/0007/e3/f7/10336.png   https://forumstatic.ru/files/0007/e3/f7/85578.png

С увеличением количество подписчиков, нам откроются новые возможности и функционал.
Если хочешь поддержать наш проект - просто подпишись! :)

0

9

Хм, у меня вместо пикселей высвечивается вот что:
http://i48.tinypic.com/294mqg0.png

0

10

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

Отредактировано Toshiro (05.06.10 21:54)

+1

Быстрый ответ

Напишите ваше сообщение и нажмите «Отправить»


ВНИМАНИЕ! При обращении за техподдержкой и вопросами по скриптам/оформлению, оставляйте ссылку на форум/сайт с проблемой! Специалист должен вживую видеть проблему, чтобы подсказать как ее решить.

ВНИМАНИЕ! Гости (не зарегистрированные на форуме) могут писать сообщения, но не могут вставлять прямые ссылки! Чтобы оставить сообщение со ссылкой на сайт, форум или скриншот удалите символы: "http://", "https://" или "www."