Главная / Верстка / Теги html / map тег html

map тег html


12.07.2013 21:164432

Описание

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

 

Именно такие задачи и выполняет тег map , создавая пространство для area , который в свою очередь создает невидимую область являющуюся ссылкой.

 

Эта чудесная совокупность дает нам возможность связать — тег <img> с клиентской картой-изображением. Для того чтобы связать изображение  с картой , достаточно ему присвоить атрибут usemap, а тегу <map> атрибут name ( и id для привязки к событиям). Идентификатор (id) и имя (name) у тега map должны быть одинаковыми !
 

 

Пример

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>Тег map</title>
</head>

<body>
<div class="mymap">
<img src="map.gif" alt="Активное изображение" usemap="#my_map">
</div>
<map id="my_map" name="my_map">
<area title="Это окружность . Нажимай скорей !" onclick="alert('Окружность')" shape="circle" coords="63,67,55"
href="#" alt="Это окружность">
<area title="Это квадрат . Нажимай скорей !" onclick="alert('Квадрат')" shape="rect" coords="215,133,274,190"
href="#" alt="Это квадрат">
<area title="Это ромб . Нажимай скорей !" onclick="alert('Ромб')" shape="poly" coords="246,14,290,58,244,106,198,60"
href="#" alt="Это ромб">
<area onclick="alert('Правый треугольник')" title="Это правая часть треугольника . Нажимай скорей !"
shape="poly" coords="59,215,119,300,59,300" href="#" alt="Это правая часть треугольника">
<area onclick="alert('Левый треугольник')" title="Это левая часть треугольника . Нажимай скорей !" shape="poly"
coords="60,215,0,300,58,300" href="#" alt="Это левая часть треугольника">
<area title="Это свободная область . Нажимай скорей !" shape="default" href="#" onclick="alert('Это свободная область изображения , на которой можно разместить еще фигуры , либо сделать открытие какой-нибудь страницы по клику , или же как вы видите в данном случае , вывод на экран сообщения по клику .')"
alt="Это свободная область">
</map>
</body>

</html>

ознакомиться с более глубоким изучением связки map+area+img в уроке


Синтаксис html и наличие закрывающего тега

Синтаксис Закрывающий тег
<map><area></map> обязателен

Браузеры поддерживающие <map>

Element
<map> Yes Yes Yes Yes Yes


Html , Map , Тег , Тег Map





«map тег html» - Похожие страницы

Нет записей


Комментарии отсутствуют
Добавление комментариев доступно только зарегистрированным пользователям