ES6 | Карта изображения

Опубликовано: 11 Декабря, 2021

Карта изображений в JavaScript используется для перехода по различным ссылкам на другие веб-страницы или к некоторым разделам той же веб-страницы с любого изображения на этой веб-странице. Который представляет собой изображение на веб-странице, это изображение разделено на несколько разделов, каждый раздел соответствует некоторым ссылкам, после нажатия на этот раздел этого изображения ссылки открываются. Этот раздел изображения называется картой изображения . Эти разделы имеют разные формы, такие как прямоугольник, круг и т. Д. Изображение вставляется на веб-страницу с помощью тега <img>, и под этим тегом есть атрибут, называемый usemap, который определяет описание карты в этом изображении. Проще говоря, атрибут usemap вызывает описание карты, которое применяется к изображению. Эта карта определена таким образом, что изображение разделено на несколько частей. Эти разделы определяются путем указания координат пикселей, которые определяют границы каждого кликабельного раздела. Есть еще один тег <area>, который определен под картой . Под этим тегом <area> определяются координаты и формы каждого раздела. Эти разделы называются горячими точками .

Синтаксис:

 <img src = "GFG.jpg" usemap = # mapName>
<map name = "mapName">
    <area shape = shapeName coords = "x, y" />
    <area shape = shapeName coords = "x, y, r" />
</map>

Пример ниже иллюстрирует карту изображений в ES6:

Пример:

 <!Doctype html>
 < html >
 < head >
    < script type = "text/javascript" >
        function fn(name) {
            document.getElementById("typ").innerHTML = name;
        }
    </ script >
 </ head >
 
< body >
    < center >
        < h1 style = "color:green;" >GeeksforGeeks</ h1 >
        < b >Mouseover on rectangle and circle</ b >
        < br >
    < span id = "typ" style = "color:#008000;" ></ span >
    < br >
    < img src =
 " https://media.geeksforgeeks.org/wp-content/uploads/20200309123213/sample16.png "
         width = "600" height = "auto" usemap=#gfg>
   
    <!--image in which the section are created-->
    < map name = "gfg" >
         
        <!-- area tag -->
        <!--coordinates are defined for
           "rectangle" and "circle"-->
        < area shape = "rect" coords = "75, 60, 250, 200"
              onmouseover = "fn('RECTANGLE')"
              onmouseout = "fn('')" />
        < area shape = "circle"
              coords = "500, 80, 110"
              onmouseover = "fn('CIRCLE')"
              onmouseout = "fn('')" >
    </ map >
 </ body >
 
</ html > 

Вывод: в этом коде координаты 75, 60, 250, 200 относятся к прямоугольнику, а координаты 500, 80, 110 относятся к кругу. На изображении созданы участки, соответствующие координатам, в которых происходят события.

Пример 2: В этом примере мы откроем ссылку с помощью карты изображений.

 <!Doctype html>
 < html >
 < head >
    < script type = "text/javascript" >
        function fn(name) {
            document.getElementById("typ").innerHTML = name;
        }
    </ script >
 </ head >
 
< body >
    < center >
        < h1 style = "color:green;" >GeeksforGeeks</ h1 >
        < b >Mouseover on rectangle and circle</ b >
        < br >
    < span id = "typ" style = "color:#008000;" ></ span >
    < br >
    < img src =
 " https://media.geeksforgeeks.org/wp-content/uploads/20200309123213/sample16.png "
         width = "600" height = "auto" usemap=#gfg>
   
    <!--image in which the section are created-->
    < map name = "gfg" >
         
        <!-- area tag -->
        <!--coordinates are defined for "rectangle" and "circle"-->
        < area shape = "rect" coords = "75, 60, 250, 200"
              href = " https://ide.geeksforgeeks.org/tryit.php "
              onmouseover = "fn('RECTANGLE')"
              onmouseout = "fn('')" />
        < area shape = "circle"
              coords = "500, 80, 110"
              onmouseover = "fn('CIRCLE')"
              onmouseout = "fn('')" >
    </ map >
 </ body >
 
</ html > 

Выход:

JavaScript Picked JavaScript-Misc

ES6 | Карта изображения

РЕКОМЕНДУЕМЫЕ СТАТЬИ