Utilisation de HTML ISMAP

Pour utiliser une image avec l'attribut ismap, il vous suffit de mettre votre image dans un hyperlien et d'utiliser ismapattribut qui en fait une image spéciale et lorsque l'utilisateur clique à un endroit de 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 50 pixels au-dessus et 30 pixels vers le bas à partir du coin supérieur gauche de l'image suivante:

Cliquez sur le lien suivant

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 -

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

Maintenant, ces coordonnées passées peuvent être traitées de l'une des deux manières suivantes -

  • Utilisation d'un fichier CGI (ou PHP si vous n'utilisez pas de fichier CGI)
  • Utilisation d'un fichier de carte

Un fichier CGI ou PHP

Voici le code Perl pour ismap.cgi script qui est utilisé dans l'exemple ci-dessus -

#!/usr/bin/perl

local ($buffer, $x, $y);
# Read in text
$ENV{'REQUEST_METHOD'} =~ tr/a-z/A-Z/;
if ($ENV{'REQUEST_METHOD'} eq "GET") {
   $buffer = $ENV{'QUERY_STRING'};
}

# Split information into name/value pairs
($x, $y) = split(/,/, $buffer);

print "Content-type:text/html\r\n\r\n";
print "<html>";
print "<head>";
print "<title>ISMAP</title>";
print "</head>";
print "<body>";
print "<h2>Passed Parameters are : X = $x, Y = $y </h2>";
print "</body>";
print "</html>";

1;

Parce que vous êtes capable d'analyser les coordonnées passées, vous pouvez mettre une liste de if conditions pour vérifier les coordonnées passées et renvoyer le document lié approprié au navigateur.

Un fichier de carte

Un fichier de carte peut être utilisé pour stocker l'emplacement des fichiers HTML vers lesquels vous voulez que le lecteur soit dirigé lorsque la zone entre les coordonnées identifiées est «cliquée».

Vous conservez le fichier par défaut au premier emplacement et d'autres fichiers sont placés correspondant à diverses coordonnées comme indiqué ci-dessous dans ismap.map fichier.

default http://www.tutorialspoint.com
rect    http://www.tutorialspoint.com/html 5,5 64,141
rect    http://www.tutorialspoint.com/css  91,5 127,196
circle  http://www.tutorialspoint.com/javscript  154,150,59

De cette façon, vous pouvez attribuer différents liens à différentes parties de l'image et lorsque ces coordonnées sont cliquées, vous pouvez ouvrir le document lié. Réécrivons donc l'exemple ci-dessus en utilisantismap.map fichier:

<!DOCTYPE html>
<html>
   <head>
      <title>ISMAP Hyperlink Example</title>
   </head>
   <body>
      <p>Click following link</p>
      <a href = "/html/ismap.map" target="_self"> 
         <img ismap src = "/images/logo.png" alt="Tutorials Point" border="0"/> 
      </a>
   </body>
</html>

Avant d'essayer l'exemple ci-dessus, vous devez vous assurer que votre serveur Web a requis la configuration pour prendre en charge le fichier de mappage d'image.

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. Vous pouvez utiliser n'importe quel outil disponible comme Adobe Photoshop ou MS Paint pour détecter diverses coordonnées disponibles sur l'image à utiliser pour ISMAP.

Les lignes commençant par # sont des commentaires. Toutes les autres lignes non vierges se composent des éléments suivants:

rect = x1 , y1 , x2 , y2

x 1 et y 1 sont les coordonnées du coin supérieur gauche du rectangle; x 2 et y 2 sont les coordonnées du coin inférieur droit.

circle = xc , yc , 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 = x1 , y1 , x2 , y2 , x3 , y3 , ... xn , yn

Les différentes paires xy définissent des sommets (points) du polygone, une "ligne" étant tracé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.