HTML: enlaces de imágenes

Hemos visto cómo crear enlaces de hipertexto utilizando texto y también hemos aprendido a utilizar imágenes en nuestras páginas web. Ahora, aprenderemos a usar imágenes para crear hipervínculos.

Ejemplo

Es sencillo utilizar una imagen como hipervínculo. Solo necesitamos usar una imagen dentro del hipervínculo en el lugar del texto como se muestra a continuación:

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

Esto producirá el siguiente resultado, donde puede hacer clic en las imágenes para llegar a la página de inicio de Tutorials Point.

Esta era la forma más sencilla de crear hipervínculos utilizando imágenes. A continuación, veremos cómo podemos crear enlaces de imágenes sensibles al mouse.

Imágenes sensibles al mouse

Los estándares HTML y XHTML proporcionan una función que le permite incrustar muchos enlaces diferentes dentro de una sola imagen. Puede crear diferentes enlaces en una sola imagen en función de las diferentes coordenadas disponibles en la imagen. Una vez que se adjuntan diferentes enlaces a diferentes coordenadas, podemos hacer clic en diferentes partes de la imagen para abrir los documentos de destino. Estas imágenes sensibles al ratón se conocen como mapas de imágenes.

Hay dos formas de crear mapas de imágenes:

Server-side image maps - Esto está habilitado por el ismap atributo de la etiqueta <img> y requiere acceso a un servidor y aplicaciones de procesamiento de mapas de imágenes relacionadas.
Client-side image maps - Esto se crea con el usemap atributo de la etiqueta <img>, junto con las etiquetas <map> y <area> correspondientes.

Mapas de imágenes del lado del servidor

Aquí simplemente coloque su imagen dentro de un hipervínculo y use ismapatributo que la convierte en una imagen especial y cuando el usuario hace clic en algún lugar dentro de la imagen, el navegador pasa las coordenadas del puntero del mouse junto con la URL especificada en la etiqueta <a> al servidor web. El servidor usa las coordenadas del puntero del mouse para determinar qué documento entregar al navegador.

Cuando se utiliza ismap , el atributo href de la etiqueta <a> que lo contiene debe contener la URL de una aplicación de servidor como un script cgi o PHP, etc. para procesar la solicitud entrante en función de las coordenadas pasadas.

Las coordenadas de la posición del mouse son píxeles de la pantalla contados desde la esquina superior izquierda de la imagen, comenzando con (0,0). Las coordenadas, precedidas por un signo de interrogación, se agregan al final de la URL.

Por ejemplo, si un usuario hace clic en 20 píxeles sobre y 30 píxeles hacia abajo desde la esquina superior izquierda de la siguiente imagen:

Que ha sido generado por el siguiente fragmento 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>

Luego, el navegador envía los siguientes parámetros de búsqueda al servidor web que pueden ser procesados por ismap.cgi guión o map file y puede vincular los documentos que desee a estas coordenadas:

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

De esta manera, puede asignar diferentes enlaces a diferentes coordenadas de la imagen y cuando se hace clic en esas coordenadas, puede abrir el documento vinculado correspondiente. Para aprender más sobreismapatributo, puede comprobar ¿Cómo utilizar Image ismap?

Note- Aprenderá programación CGI cuando estudie programación Perl. Puede escribir su script para procesar estas coordenadas pasadas usando PHP o cualquier otro script también. Por ahora, concentrémonos en aprender HTML y luego podrá volver a visitar esta sección.

Mapas de imágenes del lado del cliente

Los mapas de imágenes del lado del cliente están habilitados por el usemap atributo de la etiqueta <img /> y definido por etiquetas especiales de extensión <map> y <area>.

La imagen que va a formar el mapa se inserta en la página usando la etiqueta <img /> como una imagen normal, excepto que lleva un atributo adicional llamado usemap. El valor del atributo usemap es el valor que se utilizará en una etiqueta <map> para vincular etiquetas de mapa e imagen. Las etiquetas <map> junto con <area> definen todas las coordenadas de la imagen y los enlaces correspondientes.

La etiqueta <area> dentro de la etiqueta del mapa, especifica la forma y las coordenadas para definir los límites de cada hotspot disponible en la imagen. Aquí hay un ejemplo del mapa de imágenes:

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

Esto producirá el siguiente resultado:

Sistema coordinado

El valor real de las coordenadas depende totalmente de la forma en cuestión. Aquí hay un resumen, seguido de ejemplos detallados:

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

x ₁ e y ₁ son las coordenadas de la esquina superior izquierda del rectángulo; x ₂ e y ₂ son las coordenadas de la esquina inferior derecha.
circle = x_c , y_c , radius

x _cy y _c son las coordenadas del centro del círculo y el radio es el radio del círculo. Un círculo centrado en 200,50 con un radio de 25 tendría el atributo coords = "200,50,25"
poly = x₁ , y₁ , x₂ , y₂ , x₃ , y₃ , ... x_n , y_n

Los diversos pares xy definen vértices (puntos) del polígono, con una "línea" dibujada de un punto al siguiente. Un polígono en forma de diamante con su punto superior a 20,20 y 40 píxeles de ancho en sus puntos más anchos tendría el atributo coords = "20,20,40,40,20,60,0,40" .

Todas las coordenadas son relativas a la esquina superior izquierda de la imagen (0,0). Cada forma tiene una URL relacionada. Puede utilizar cualquier software de imagen para conocer las coordenadas de diferentes posiciones.

↰ Previous page Next page ↱