HTML - Liens d'image

Nous avons vu comment créer un lien hypertexte à l'aide de texte et nous avons également appris à utiliser des images dans nos pages Web. Nous allons maintenant apprendre à utiliser des images pour créer des hyperliens.

Exemple

Il est simple d'utiliser une image comme lien hypertexte. Nous avons juste besoin d'utiliser une image à l'intérieur du lien hypertexte à la place du texte comme indiqué ci-dessous -

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

Cela produira le résultat suivant, où vous pourrez cliquer sur les images pour accéder à la page d'accueil de Tutorials Point.

C'était le moyen le plus simple de créer des hyperliens à l'aide d'images. Ensuite, nous verrons comment nous pouvons créer des liens d'image sensibles à la souris.

Images sensibles à la souris

Les normes HTML et XHTML fournissent une fonctionnalité qui vous permet d'incorporer de nombreux liens différents dans une seule image. Vous pouvez créer différents liens sur une seule image en fonction des différentes coordonnées disponibles sur l'image. Une fois que différents liens sont attachés à différentes coordonnées, nous pouvons cliquer sur différentes parties de l'image pour ouvrir les documents cibles. Ces images sensibles à la souris sont appelées cartes d'images.

Il existe deux façons de créer des images maps -

Server-side image maps - Ceci est activé par le ismap attribut de la balise <img> et nécessite l'accès à un serveur et aux applications de traitement d'image-map associées.
Client-side image maps - Ceci est créé avec le usemap l'attribut de la balise <img>, ainsi que les balises <map> et <area> correspondantes.

Cartes d'images côté serveur

Ici, vous mettez simplement votre image dans un hyperlien et utilisez ismapattribut qui en fait une image spéciale et lorsque l'utilisateur clique à un endroit dans l'image, le navigateur transmet les coordonnées du pointeur de la souris avec l'URL spécifiée dans la balise <a> au serveur Web. Le serveur utilise les coordonnées du pointeur de la souris pour déterminer le document à renvoyer au navigateur.

Lorsque ismap est utilisé, l'attribut href de la balise <a> contenant doit contenir l'URL d'une application serveur comme un script cgi ou PHP, etc. pour traiter la requête entrante en fonction des coordonnées passées.

Les coordonnées de la position de la souris sont des pixels d'écran comptés à partir du coin supérieur gauche de l'image, en commençant par (0,0). Les coordonnées, précédées d'un point d'interrogation, sont ajoutées à la fin de l'URL.

Par exemple, si un utilisateur clique sur 20 pixels au-dessus et 30 pixels vers le bas à partir du coin supérieur gauche de l'image suivante -

Qui a été généré par l'extrait de code suivant -

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

Ensuite, le navigateur envoie les paramètres de recherche suivants au serveur Web qui peuvent être traités par ismap.cgi script ou map file et vous pouvez lier tous les documents que vous aimez à ces coordonnées -

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

De cette façon, vous pouvez attribuer différents liens à différentes coordonnées de l'image et lorsque ces coordonnées sont cliquées, vous pouvez ouvrir le document lié correspondant. En apprendre davantage surismapattribut, vous pouvez vérifier Comment utiliser Image ismap?

Note- Vous apprendrez la programmation CGI lorsque vous étudierez la programmation Perl. Vous pouvez également écrire votre script pour traiter ces coordonnées passées en utilisant PHP ou tout autre script. Pour l'instant, concentrons-nous sur l'apprentissage du HTML et plus tard, vous pourrez revoir cette section.

Cartes d'images côté client

Les images cartographiques côté client sont activées par le usemap attribut de la balise <img /> et défini par des balises d'extension spéciales <map> et <area>.

L'image qui va former la carte est insérée dans la page en utilisant la balise <img /> comme image normale, sauf qu'elle porte un attribut supplémentaire appelé usemap. La valeur de l'attribut usemap est la valeur qui sera utilisée dans une balise <map> pour lier les balises map et image. Les balises <map> et <area> définissent toutes les coordonnées de l'image et les liens correspondants.

La balise <area> à l'intérieur de la balise map, spécifie la forme et les coordonnées pour définir les limites de chaque hotspot cliquable disponible sur l'image. Voici un exemple de la carte d'image -

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

Cela produira le résultat suivant -

Système de coordonnées

La valeur réelle des coords dépend totalement de la forme en question. Voici un résumé, suivi d'exemples détaillés -

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

x ₁ et y ₁ sont les coordonnées du coin supérieur gauche du rectangle; x ₂ et y ₂ sont les coordonnées du coin inférieur droit.
circle = x_c , y_c , radius

x _c et y _c sont les coordonnées du centre du cercle et le rayon est le rayon du cercle. Un cercle centré à 200,50 avec un rayon de 25 aurait l'attribut coords = "200,50,25"
poly = x₁ , y₁ , x₂ , y₂ , x₃ , y₃ , ... x_n , y_n

Les différentes paires xy définissent les sommets (points) du polygone, une "ligne" étant dessinée d'un point au point suivant. Un polygone en forme de losange avec son point supérieur à 20,20 et 40 pixels à ses points les plus larges aurait l'attribut coords = "20,20,40,40,20,60,0,40" .

Toutes les coordonnées sont relatives au coin supérieur gauche de l'image (0,0). Chaque forme a une URL associée. Vous pouvez utiliser n'importe quel logiciel d'image pour connaître les coordonnées des différentes positions.

↰ Previous page Next page ↱