ES6 | Карта изображения
Карта изображений в 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
=
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
=
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
>
- Выход: