Вы можете использовать JavaScript для создания карты изображений на стороне клиента. Карты изображений на стороне клиента активируются атрибутом usemap для тега img и определяются специальными тегами расширения map и area.

Изображение, которое собирается сформировать карту, вставляется в страницу с использованием элемента img как обычно, за исключением того, что он содержит дополнительный атрибут, называемый usemap. Значение атрибута usemap - это значение атрибута name в элементе map, который вы собираетесь встретить, которому предшествует знак фунта или хэша.

Элемент map фактически создает карту для изображения и обычно следует непосредственно после элемента img. Он выступает в качестве контейнера для элементов area, которые на самом деле определяют точки доступа, доступные для клика. Элемент map содержит только один атрибут, атрибут name, который является именем, которое идентифицирует карту. Вот как элемент img знает, какой элемент map использовать.

Элемент area указывает форму и координаты, определяющие границы каждой точки доступа, доступной для кликов.

Следующий код объединяет imagemaps и 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>

Вы можете почувствовать концепцию карты, поместив курсор мыши на объект изображения.


Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!



Cookies make it easier for us to provide you with our services. With the usage of our services you permit us to use cookies.
Ok