Вы можете использовать JavaScript для создания клиентской карты изображений. Карты изображений на стороне клиента активируются атрибутом usemap для тега <img /> и определяются специальными тегами расширения <map> и <area>.
Изображение, которое будет формировать карту, вставляется на страницу с использованием элемента <img /> как обычно, за исключением того, что оно содержит дополнительный атрибут, называемый usemap . Значением атрибута usemap является значение атрибута name в элементе <map>, с которым вы собираетесь встретиться, перед которым стоит знак фунта или хеша.
Элемент <map> фактически создает карту для изображения и обычно следует непосредственно после элемента <img />. Он действует как контейнер для элементов <area />, которые фактически определяют активируемые горячие точки. Элемент <map> содержит только один атрибут, атрибут name , который является именем, идентифицирующим карту. Вот как элемент <img /> знает, какой элемент <map> использовать.
Элемент <area> указывает форму и координаты, которые определяют границы каждой активной области.
Следующий код объединяет графические изображения и JavaScript для создания сообщения в текстовом поле, когда указатель мыши перемещается над различными частями изображения.
<html> <head> <title>Using JavaScript Image Map</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> <!-- Create Mappings --> <img src = "/images/usemap.gif" alt = "HTML Map" border = "0" usemap = "#tutorials"/> <map name = "tutorials"> <area shape="poly" coords = "74,0,113,29,98,72,52,72,38,27" href = "/perl/index.htm" alt = "Perl Tutorial" target = "_self" onMouseOver = "showTutorial('perl')" onMouseOut = "showTutorial('')"/> <area shape = "rect" coords = "22,83,126,125" href = "/html/index.htm" alt = "HTML Tutorial" target = "_self" onMouseOver = "showTutorial('html')" onMouseOut = "showTutorial('')"/> <area shape = "circle" coords = "73,168,32" href = "/php/index.htm" alt = "PHP Tutorial" target = "_self" onMouseOver = "showTutorial('php')" onMouseOut = "showTutorial('')"/> </map> </body> </html>
Выход
Вы можете почувствовать концепцию карты, поместив курсор мыши на объект изображения.