HTML - Links de imagens

Vimos como criar links de hipertexto usando texto e também aprendemos como usar imagens em nossas páginas da web. Agora, aprenderemos como usar imagens para criar hiperlinks.

Exemplo

É simples usar uma imagem como hiperlink. Só precisamos usar uma imagem dentro do hiperlink no lugar do texto, conforme mostrado abaixo -

<!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>

Isso produzirá o seguinte resultado, onde você pode clicar nas imagens para acessar a página inicial do Tutorials Point.

Essa foi a maneira mais simples de criar hiperlinks usando imagens. A seguir, veremos como podemos criar links de imagens sensíveis ao mouse.

Imagens sensíveis ao mouse

Os padrões HTML e XHTML fornecem um recurso que permite incorporar muitos links diferentes em uma única imagem. Você pode criar links diferentes em uma única imagem com base nas diferentes coordenadas disponíveis na imagem. Uma vez que diferentes links são anexados a diferentes coordenadas, podemos clicar em diferentes partes da imagem para abrir os documentos de destino. Essas imagens sensíveis ao mouse são conhecidas como mapas de imagens.

Existem duas maneiras de criar mapas de imagens -

Server-side image maps - Isso é habilitado pelo ismap da tag <img> e requer acesso a um servidor e aplicativos de processamento de mapa de imagem relacionados.
Client-side image maps - Isso é criado com o usemap atributo da tag <img>, junto com as tags <map> e <area> correspondentes.

Mapas de imagem do lado do servidor

Aqui você simplesmente coloca sua imagem dentro de um hiperlink e usa ismapque o torna uma imagem especial e quando o usuário clica em algum lugar dentro da imagem, o navegador passa as coordenadas do ponteiro do mouse junto com a URL especificada na tag <a> para o servidor web. O servidor usa as coordenadas do ponteiro do mouse para determinar qual documento deve ser devolvido ao navegador.

Quando ismap é usado, o atributo href da tag contendo <a> deve conter a URL de um aplicativo de servidor como um cgi ou script PHP etc. para processar a solicitação de entrada com base nas coordenadas passadas.

As coordenadas da posição do mouse são pixels da tela contados a partir do canto superior esquerdo da imagem, começando com (0,0). As coordenadas, precedidas por um ponto de interrogação, são adicionadas ao final da URL.

Por exemplo, se um usuário clicar em 20 pixels acima e 30 pixels abaixo do canto superior esquerdo da imagem a seguir -

Que foi gerado pelo seguinte snippet de código -

<!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>

Em seguida, o navegador envia os seguintes parâmetros de pesquisa para o servidor da web, que podem ser processados por ismap.cgi script ou map file e você pode vincular quaisquer documentos que desejar a essas coordenadas -

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

Desta forma, você pode atribuir diferentes links para diferentes coordenadas da imagem e quando essas coordenadas são clicadas, você pode abrir o documento vinculado correspondente. Para aprender mais sobreismapatributo, você pode verificar Como usar o ismap de imagem?

Note- Você aprenderá programação CGI quando estudar programação Perl. Você pode escrever seu script para processar essas coordenadas passadas usando PHP ou qualquer outro script também. Por enquanto, vamos nos concentrar em aprender HTML e, mais tarde, você pode revisitar esta seção.

Mapas de imagem do cliente

Os mapas de imagens do lado do cliente são habilitados pelo usemap atributo da tag <img /> e definido por tags de extensão <map> e <area> especiais.

A imagem que vai formar o mapa é inserida na página usando a tag <img /> como uma imagem normal, exceto que carrega um atributo extra chamado usemap. O valor do atributo usemap é o valor que será usado em uma tag <map> para vincular tags de mapa e imagem. O <map> junto com as tags <area> definem todas as coordenadas da imagem e links correspondentes.

A tag <area> dentro da tag do mapa, especifica a forma e as coordenadas para definir os limites de cada ponto ativo clicável disponível na imagem. Aqui está um exemplo do mapa de imagem -

<!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>

Isso produzirá o seguinte resultado -

Sistema de coordenadas

O valor real de coords é totalmente dependente da forma em questão. Aqui está um resumo, a ser seguido por exemplos detalhados -

rect = x₁ , y₁ , x₂ , y₂

x ₁ ey ₁ são as coordenadas do canto superior esquerdo do retângulo; x ₂ ey ₂ são as coordenadas do canto inferior direito.
circle = x_c , y_c , radius

x _c e y _c são as coordenadas do centro do círculo e raio é o raio do círculo. Um círculo centrado em 200,50 com um raio de 25 teria o atributo coords = "200,50,25"
poly = x₁ , y₁ , x₂ , y₂ , x₃ , y₃ , ... x_n , y_n

Os vários pares xy definem vértices (pontos) do polígono, com uma "linha" sendo desenhada de um ponto ao próximo ponto. Um polígono em forma de diamante com seu ponto superior em 20,20 e 40 pixels em seus pontos mais largos teria o atributo coords = "20,20,40,40,20,60,0,40" .

Todas as coordenadas são relativas ao canto superior esquerdo da imagem (0,0). Cada forma possui um URL relacionado. Você pode usar qualquer software de imagem para saber as coordenadas de diferentes posições.

↰ Previous page Next page ↱