Мы увидели, как создать гипертекстовую ссылку с помощью текста, а также узнали, как использовать изображения на наших веб-страницах. Теперь мы узнаем, как использовать изображения для создания гиперссылок.
Просто использовать изображение в качестве гиперссылки. Нам просто нужно использовать изображение внутри гиперссылки вместо текста, как показано ниже:
<!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>
Это приведет к следующему результату, где вы можете щелкнуть изображения, чтобы перейти на домашнюю страницу BasicIT.org.
Это был самый простой способ создания гиперссылок с использованием изображений. Далее мы увидим, как мы можем создавать ссылки на изображения, чувствительные к мыши.
Стандарты HTML и XHTML предоставляют функцию, позволяющую вставлять множество разных ссылок в одно изображение. Вы можете создавать разные ссылки на одном изображении на основе разных координат, доступных на изображении. Когда разные ссылки привязаны к разным координатам, мы можем щелкнуть разные части изображения, чтобы открыть целевые документы. Такие чувствительные к мыши изображения известны как карты изображений.
Существует два способа создания карт изображений:
Карты изображений на стороне сервера - активируется атрибутом ismap тега и требует доступа к серверу и связанным с ним приложениям для обработки карт изображений.
Карты изображений на стороне клиента — создаются с помощью атрибута usemap тега вместе с соответствующими тегами
Здесь вы просто помещаете свое изображение в гиперссылку и используете атрибут
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, а позже вы сможете вернуться к этому разделу.
Карты изображений на стороне клиента включаются атрибутом usemap тега.
<img />
и определяется специальными тегами расширения.
<map> and <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>
Это даст следующий результат:
Фактическое значение координат полностью зависит от рассматриваемой формы. Вот краткое изложение, за которым следуют подробные примеры:
x1 и y1 — координаты левого верхнего угла прямоугольника; x2 и y2 — координаты нижнего правого угла.
xc и yc — координаты центра круга, а radius — радиус круга. Круг с центром в точке 200,50 и радиусом 25 будет иметь атрибут coords="200,50,25".
Различные пары x-y определяют вершины (точки) многоугольника, при этом «линия» проводится от одной точки к другой. Многоугольник в форме ромба с верхней точкой 20, 20 и шириной 40 пикселей в самых широких точках будет иметь атрибут coords="20,20,40,40,20,60,0,40".
Все координаты относятся к верхнему левому углу изображения (0,0). Каждая фигура имеет связанный URL. Вы можете использовать любое программное обеспечение для обработки изображений, чтобы узнать координаты различных позиций.