Элемент IMG позволяет нам встраивать изображения в документы HTML.
Чтобы встроить изображение, вам необходимо использовать атрибуты SRC и ALT, код заключается в следующем:
<img src = "../ img/example/img-map.jpg"/>
Эффект отображения:
1 Встроен изображение в гиперссылку
Распространенное использование элемента IMG-создать гиперссылку на основе изображений в сочетании с элементом, код выглядит следующим образом:
<a href = "owerpage.html"> <img src = "../ img/example/img-map.jpg" ismap/> </a>
То, как браузер отображает это изображение, ничем не отличается. Следовательно, важно предоставить пользователям визуальные сигналы, что конкретное изображение представляет гиперссылку. Конкретный подход может заключаться в использовании CSS, что лучше выражать его в содержании изображения.
Если вы нажмете на это изображение, браузер перейдет к URL -адресу, указанному атрибутом Href родительского элемента a. Применение атрибута ISMAP к элементу IMG создает карту ответа на серверной ветви, что означает, что локации, нажимающие на изображение, будут прикреплены к URL. Например, если расположение щелчка составляет 8 пикселей от верхней части изображения и 10 пикселей на левом краю, браузер перейдет к следующему адресу:
https://yxiaochao.github.io/show4cnblogs/otherpage.html?10,8
Следующий код показывает контент в другой page.html, который содержит простой сценарий для отображения координат позиции клика:
<body> <p> x-координата-<b> <span id = "xco"> ?? </span> </b> </p> <p> y-координат-<b> <span id = "yco"> ?? window.location.href.split ('?') [1] .split (','); document.getElementById ("xco"). innerhtml = координаты [0]; document.getElementbyId ("yco"). innerHtml = координаты [1]; </script> </body>То, как браузер отображает это изображение, ничем не отличается. Следовательно, важно предоставить пользователям визуальные сигналы, что конкретное изображение представляет гиперссылку. Конкретный подход может заключаться в использовании CSS, что лучше выражать его в содержании изображения.
Если вы нажмете на это изображение, браузер перейдет к URL -адресу, указанному атрибутом Href родительского элемента a. Применение атрибута ISMAP к элементу IMG создает карту ответа на серверной ветви, что означает, что локации, нажимающие на изображение, будут прикреплены к URL. Например, если расположение щелчка составляет 8 пикселей от верхней части изображения и 10 пикселей на левом краю, браузер перейдет к следующему адресу:
https://yxiaochao.github.io/show4cnblogs/otherpage.html?10,8
Следующий код показывает контент в другой page.html, который содержит простой сценарий для отображения координат позиции клика:
<body> <p> x-координата-<b> <span id = "xco"> ?? </span> </b> </p> <p> y-координат-<b> <span id = "yco"> ?? window.location.href.split ('?') [1] .split (','); document.getElementById ("xco"). innerhtml = координаты [0]; document.getElementbyId ("yco"). innerHtml = координаты [1]; </script> </body>Вы можете увидеть эффект щелчка мыши:
График ответа на раздела на стороне сервера обычно означает, что сервер будет реагировать по-разному в соответствии с областью клика пользователя на изображении, такой как возврат различной информации о ответе. Если атрибут ISMAP на элементе IMG опущен, координаты щелчка мыши не будут включены в URL -адрес запроса.
2 Создать диаграмму ответа на раздел клиента
Мы можем создать карту ответа на разделение клиента и позволить браузеру перейти к разным URL -адресам, нажав на разные области на изображении. Этот процесс не требует загрузки через сервер, поэтому элементы используются для определения отдельных областей на изображении и поведения, которое они представляют. Ключевым элементом графа отклика клиента является карта, которая содержит один или несколько элементов области, каждый из которых представляет область на изображении, которую можно щелкнуть.
Свойства элемента области можно разделить на две категории. Первая категория посвящена URL -адресу, к которому будет перемещаться браузер после того, как пользователь нажимается в области изображения, представленной в области. На следующем рисунке представлен этот тип атрибута, который аналогичен соответствующим атрибутам, наблюдаемым на других элементах.
Вторая категория содержит более интересные атрибуты: форма и координации атрибутов. Эти свойства могут использоваться для обозначения каждой области изображения, на которую может нажать пользователь. Форма и координационные свойства работают вместе. Значение атрибута координат зависит от значения атрибута формы, как показано на рисунке ниже:
После представления этих элементов приведите пример, код выглядит следующим образом:
<body> <img src = "../ img/example/img-map.jpg" ismap usemap = "#mymap"/> <map name = "mymap"> <область href = "javascript: show_page (1)" shape = "rect" координат = "34,60,196,230"/> <rea href = "javascript: javascript:" (34,60,196,230 "/> <reably href =" 34,60,196,230 "/>". shape="rect" coords="'210,60,370,230" /> <area href="javascript:show_page(3)" shape="rect" coords="'383,60,545,230" /></map><script type="application/javascript"> function show_page(num){ //Show the product through the dialog box to indicate the corresponding jump page оповещение («это продукт»+num); } </script> </body>Эффект отображения такой же, за исключением того, что когда вы нажимаете на соответствующее изображение продукта, появится соответствующее название продукта, указывая на страницу прыжкового продукта.
Приведенная выше статья Javascript Basics_simple Реализация встроенных изображений - это все контент, которым я делюсь с вами. Я надеюсь, что вы можете дать вам ссылку, и я надеюсь, что вы сможете поддержать Wulin.com больше.