JavaScript - Карта изображений

: Категория: JavaScript; Опубликовано: 14 сентября 2018; Просмотров: 2211

javascript

Вы можете использовать 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>

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

JavaScript - Карта изображений

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

Новые статьи

Предыдущие статьи

Поделиться в соцсетях

Подписаться на канал

ТОП-10 статей

Свежие записи