HTML - Ссылки на изображения

Мы увидели, как создать гипертекстовую ссылку с помощью текста, а также узнали, как использовать изображения на наших веб-страницах. Теперь мы узнаем, как использовать изображения для создания гиперссылок.

пример

Использовать изображение как гиперссылку просто. Нам просто нужно использовать изображение внутри гиперссылки вместо текста, как показано ниже -

<!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 предоставляют функцию, которая позволяет вставлять множество разных ссылок в одно изображение. Вы можете создавать разные ссылки на одном изображении на основе разных координат, доступных на изображении. После того, как разные ссылки привязаны к разным координатам, мы можем щелкнуть разные части изображения, чтобы открыть целевые документы. Такие изображения, чувствительные к мыши, известны как карты изображений.

Есть два способа создания карт изображений:

Server-side image maps - Это включено ismap атрибут тега <img> и требует доступа к серверу и связанным приложениям обработки карт изображений.
Client-side image maps - Это создано с помощью 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 сценарий или map file и вы можете связать любые документы с этими координатами -

/cgi-bin/ismap.cgi?20,30

Таким образом, вы можете назначать разные ссылки для разных координат изображения, и при нажатии на эти координаты вы можете открыть соответствующий связанный документ. Чтобы узнать больше оismapатрибут, вы можете проверить Как использовать Image ismap?

Note- Вы изучите программирование 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₁ , y₁ , x₂ , y₂

x ₁ и y ₁ - координаты левого верхнего угла прямоугольника; x ₂ и y ₂ - координаты правого нижнего угла.
circle = x_c , y_c , radius

x _c и y _c - координаты центра круга, а радиус - радиус круга. Круг с центром в 200,50 и радиусом 25 будет иметь атрибут coords = "200,50,25".
poly = x₁ , y₁ , x₂ , y₂ , x₃ , y₃ , ... x_n , y_n

Различные пары xy определяют вершины (точки) многоугольника, при этом от одной точки к следующей проводится «линия». Многоугольник в форме ромба с верхней точкой в 20,20 и 40 пикселей в ширину в самых широких точках будет иметь атрибут coords = "20,20,40,40,20,60,0,40" .

Все координаты указаны относительно левого верхнего угла изображения (0,0). У каждой фигуры есть связанный URL. Вы можете использовать любое графическое программное обеспечение, чтобы узнать координаты различных позиций.