Мы увидели, как создавать гипертекстовые ссылки, используя текст, а также научились использовать изображения на наших веб-страницах. Теперь мы узнаем, как использовать изображения для создания гиперссылок.
пример
Просто использовать изображение в качестве гиперссылки. Нам просто нужно использовать изображение внутри гиперссылки в месте текста, как показано ниже —
<!DOCTYPE html> <html> <head> <title>Image Hyperlink Example</title> </head> <body> <p>Click following link</p> <a href = "https://www.tutorialspoint.com" target = "_self"> <img src = "/images/logo.png" alt = "Tutorials Point" border = "0"/> </a> </body> </html>
Это приведет к следующему результату, где вы можете нажать на изображения, чтобы перейти на домашнюю страницу Tutorials Point.
Это был самый простой способ создания гиперссылок с использованием изображений. Далее мы увидим, как мы можем создавать чувствительные к мышке ссылки на изображения.
Чувствительные к мышке изображения
Стандарты HTML и XHTML предоставляют функцию, которая позволяет встраивать множество различных ссылок в одно изображение. Вы можете создавать разные ссылки на одно изображение на основе различных координат, доступных на изображении. Как только разные ссылки прикреплены к разным координатам, мы можем щелкнуть по разным частям изображения, чтобы открыть целевые документы. Такие чувствительные к мыши изображения известны как карты изображений.
Есть два способа создания карт изображений —
-
Карты изображений на стороне сервера — это включено атрибутом ismap тега <img> и требует доступа к серверу и связанным приложениям обработки карт изображений.
-
Карты изображений на стороне клиента — создаются с помощью атрибута usemap тега <img> вместе с соответствующими тегами <map> и <area>.
Карты изображений на стороне сервера — это включено атрибутом ismap тега <img> и требует доступа к серверу и связанным приложениям обработки карт изображений.
Карты изображений на стороне клиента — создаются с помощью атрибута usemap тега <img> вместе с соответствующими тегами <map> и <area>.
Серверные карты изображений
Здесь вы просто помещаете свое изображение в гиперссылку и используете атрибут ismap, который делает его специальным изображением, а когда пользователь щелкает какое-то место на изображении, браузер передает координаты указателя мыши вместе с URL-адресом, указанным в теге <a>. на веб-сервер. Сервер использует координаты указателя мыши, чтобы определить, какой документ следует доставить обратно в браузер.
Когда используется ismap , атрибут href содержащего тега <a> должен содержать URL-адрес серверного приложения, такого как сценарий cgi или PHP и т. Д., Для обработки входящего запроса на основе переданных координат.
Координаты положения мыши — это пиксели экрана, отсчитываемые от верхнего левого угла изображения, начиная с (0,0). Координаты, перед которыми стоит знак вопроса, добавляются в конец URL.
Например, если пользователь щелкает 20 пикселей вверх и 30 пикселей вниз от верхнего левого угла следующего изображения —
Который был сгенерирован следующим фрагментом кода —
<!DOCTYPE html> <html> <head> <title>ISMAP Hyperlink Example</title> </head> <body> <p>Click following link</p> <a href = "/cgi-bin/ismap.cgi" target = "_self"> <img ismap src = "/images/logo.png" alt = "Tutorials Point" border = "0"/> </a> </body> </html>
Затем браузер отправляет следующие параметры поиска на веб-сервер, которые могут быть обработаны сценарием ismap.cgi или файлом карты, и вы можете связать любые документы, которые вам нравятся, с этими координатами —
/cgi-bin/ismap.cgi?20,30
Таким образом, вы можете назначать разные ссылки на разные координаты изображения, и когда вы щелкаете по этим координатам, вы можете открыть соответствующий связанный документ. Чтобы узнать больше об атрибуте ismap , вы можете проверить, как использовать изображение ismap?
Примечание. Вы изучите программирование на CGI, когда будете изучать программирование на Perl. Вы можете написать свой скрипт для обработки этих переданных координат, используя PHP или любой другой скрипт. А сейчас давайте сосредоточимся на изучении HTML, а позже вы можете вернуться к этому разделу.
Примечание. Вы изучите программирование на CGI, когда будете изучать программирование на Perl. Вы можете написать свой скрипт для обработки этих переданных координат, используя PHP или любой другой скрипт. А сейчас давайте сосредоточимся на изучении HTML, а позже вы можете вернуться к этому разделу.
Клиентские карты изображений
Карты изображений на стороне клиента активируются атрибутом usemap тега <img /> и определяются специальными тегами расширения <map> и <area>.
Изображение, которое будет формировать карту, вставляется на страницу с использованием тега <img /> в качестве обычного изображения, за исключением того, что оно содержит дополнительный атрибут, называемый usemap . Значением атрибута usemap является значение, которое будет использоваться в теге <map> для связывания тегов карты и изображения. <Map> вместе с тегами <area> определяют все координаты изображения и соответствующие ссылки.
Тег <area> внутри тега карты определяет форму и координаты для определения границ каждой активной точки, доступной на изображении, доступной на изображении. Вот пример из карты изображений —
<!DOCTYPE html> <html> <head> <title>USEMAP Hyperlink Example</title> </head> <body> <p>Search and click the hotspot</p> <img src = /images/html.gif alt = "HTML Map" border = "0" usemap = "#html"/> <!-- Create Mappings --> <map name = "html"> <area shape = "circle" coords = "80,80,20" href = "/css/index.htm" alt = "CSS Link" target = "_self" /> <area shape = "rect" coords = "5,5,40,40" alt = "jQuery Link" href = "/jquery/index.htm" target = "_self" /> </map> </body> </html>
Это даст следующий результат —
Система координат
Фактическое значение координат полностью зависит от рассматриваемой формы. Вот краткое изложение, за которым следуют подробные примеры —
-
rect = x 1 , y 1 , x 2 , y 2
x 1 и y 1 — координаты верхнего левого угла прямоугольника; x 2 и y 2 — координаты нижнего правого угла.
-
окружность = х с , у с , радиус
x c и y c — координаты центра круга, а радиус — радиус круга. Круг с центром в 200,50 с радиусом 25 будет иметь атрибут ords = «200,50,25»
-
поли = х 1 , у 1 , х 2 , у 2 , х 3 , у 3 , … х н , у н
Различные пары xy определяют вершины (точки) многоугольника с «линией», проведенной из одной точки в следующую точку. Ромбовидный многоугольник с верхней точкой в 20,20 и шириной 40 пикселей в самых широких точках будет иметь атрибут координирование = «20,20,40,40,20,60,0,40» .
rect = x 1 , y 1 , x 2 , y 2
x 1 и y 1 — координаты верхнего левого угла прямоугольника; x 2 и y 2 — координаты нижнего правого угла.
окружность = х с , у с , радиус
x c и y c — координаты центра круга, а радиус — радиус круга. Круг с центром в 200,50 с радиусом 25 будет иметь атрибут ords = «200,50,25»
поли = х 1 , у 1 , х 2 , у 2 , х 3 , у 3 , … х н , у н
Различные пары xy определяют вершины (точки) многоугольника с «линией», проведенной из одной точки в следующую точку. Ромбовидный многоугольник с верхней точкой в 20,20 и шириной 40 пикселей в самых широких точках будет иметь атрибут координирование = «20,20,40,40,20,60,0,40» .
Все координаты указаны относительно верхнего левого угла изображения (0,0). Каждая фигура имеет связанный URL. Вы можете использовать любое программное обеспечение для изображения, чтобы узнать координаты различных позиций.