Мы и не представляем себе, сколько нужно ума, чтобы не казаться смешным! (Н. Шамфор).

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

Главное меню » Язык программирования Javascript » Javascript — Учебное пособие » JavaScript — Карта изображений

(1 оценок, среднее: 5,00 из 5)

Загрузка...

20.11.2017

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