JavaScript — Карта изображений
Вы можете использовать JavaScript для создания на стороне клиента карты изображения. Карты изображения на стороне клиента включены в атрибут usemap для тега <img /> и определяется специальными тегами расширения <map> и <area>.
Изображение, которое будет формировать карту вставляется в страницу с помощью элемента <img /> как обычно, за исключением того, что она несет в себе дополнительный атрибут usemap. Значение атрибута usemap является значением атрибута имени на элементе <map>, который вы собираетесь встретить, перед которым стоит знак фунта или хэша.
Элемент <map> фактически создает карту для изображения и обычно следует непосредственно после элемента <img />. Он выступает в качестве контейнера для элемента <area />, которые фактически определяет гиперобъекты. Элемент <map> несет только один атрибут, это атрибут name, который является именем, которое идентифицирует карту. Это как элемент <img />, какой элемент <карты> надо использовать.
<area> определяет форму и координаты, определяющие границы каждого гиперобъекта.
Следующий код объединяет JavaScript и сенсорное изображение для получения сообщения в текстовом поле, когда мышь перемещается по различным частям изображения.
<html>
<head>
<title>Использование JavaScript в карте изображения</title>
<script type="text/javascript">
<!--
function showTutorial(name){
document.myform.stage.value = name
}
//-->
</script>
</head>
<body>
<form name="myform">
<input type="text" name="stage" size="20" />
</form>
<!-- Создание карты -->
<img src="/images/usemap.gif" alt="Карта HTML" border="0" usemap="#tutorials"/>
<map name="tutorials">
<area shape="poly"
coords="74,0,113,29,98,72,52,72,38,27"
href="//andreyex.ru/bazy-dannyx/uchebnoe-posobie-po-sql/" alt="Учебное пособие MySQL"
target="_self"
onMouseOver="showTutorial('mysql')"
onMouseOut="showTutorial('')"/>
<area shape="rect"
coords="22,83,126,125"
href="//andreyex.ru/uchebnoe-posobie-po-framework-bootstrap/" alt="Учебное пособие Bootstrap"
target="_self"
onMouseOver="showTutorial('bootstrap')"
onMouseOut="showTutorial('')"/>
<area shape="circle"
coords="73,168,32"
href="//andreyex.ru/yazyk-programmirovaniya-python/uchebnik-po-python-3/" alt="Учебное пособие Python"
target="_self"
onMouseOver="showTutorial('python')"
onMouseOut="showTutorial('')"/>
</map>
</body>
</html>
