18:46
Добавить изображение с картой
Вообще говоря, существует два типа карт: карты на стороне сервера и карты, создаваемые на стороне клиента; последние мы будем создавать с помощью тегов "map" и "area".



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

Код
<img src="mapamundi.gif" alt="Mapa mundial" usemap="#mapamundi" />
<map name="mapamundi" id="mapamundi">
  <area shape="rect" coords="0,0,115,90" href="america.html" alt="America" />
  <area shape="poly" coords="113,39,187,21,180,72,141,77,117,86" href="russia.html" alt="Russia" />
</map>


В этом примере мы определяем изображение, связанное с картой через атрибут "usemap", который имеет то же значение, что и атрибут "id" элемента "map".

В данном случае мы ссылаемся на "id", а не на "name", поскольку в этом заключается разница между XHTML и HTML. XHTML считает атрибут "name" для тега "map" устаревшим, поэтому "id" становится общепринятым атрибутом, хотя в данном примере мы используем оба, чтобы избежать проблем совместимости.

Каждый элемент области карты определяется одноименным тегом, который имеет атрибуты shape и coordinate.

Для первой области мы используем прямоугольную форму, поэтому атрибут "shape" имеет значение "rect", а координаты должны указывать на четыре точки фигуры, поэтому атрибут "coords" указывает четыре значения через запятую. Вторая область использует многоугольную форму, поэтому для указания формы требуется больше значений.

Причина, по которой эти карты не так широко используются, заключается в том, что их применение ограничено только определенными учениями, как в случае с географическими темами, подобными той, которую мы видели, в дополнение к тому, что они не удобны в интерфейсе, во многих случаях мы не можем сделать вывод, что изображение имеет внутренние разделения или ссылки.
Категория: Сайтостроение | Просмотров: 232 | Добавил: vit90ivan | Теги: Карта, Изображение с картой | Рейтинг: 0.0/0
Всего комментариев: 0
avatar