Utilizzo di HTML ISMAP

Per usare un'immagine con l'attributo ismap, inserisci semplicemente la tua immagine all'interno di un collegamento ipertestuale e usa ismapattributo che la rende un'immagine speciale e quando l'utente fa clic in un punto all'interno dell'immagine, il browser passa le coordinate del puntatore del mouse insieme all'URL specificato nel tag <a> al server web. Il server utilizza le coordinate del puntatore del mouse per determinare quale documento restituire al browser.

Quando viene utilizzato ismap , l'attributo href del tag <a> che lo contiene deve contenere l'URL di un'applicazione server come uno script cgi o PHP ecc. Per elaborare la richiesta in arrivo in base alle coordinate passate.

Le coordinate della posizione del mouse sono i pixel dello schermo contati dall'angolo superiore sinistro dell'immagine, a partire da (0,0). Le coordinate, precedute da un punto interrogativo, vengono aggiunte alla fine dell'URL.

Ad esempio, se un utente fa clic su 50 pixel in più e 30 pixel in basso dall'angolo superiore sinistro della seguente immagine:

Fare clic sul seguente collegamento

Che è stato generato dal seguente snippet di codice:

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

Quindi il browser invia i seguenti parametri di ricerca al server web:

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

Ora queste coordinate passate possono essere elaborate in uno dei due modi seguenti:

  • Utilizzo di un file CGI (o PHP se non si utilizza un file CGI)
  • Utilizzando un map file

Un file CGI o PHP

Di seguito è riportato il codice Perl per ismap.cgi script che viene utilizzato nell'esempio precedente -

#!/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;

Poiché sei in grado di analizzare le coordinate passate, puoi inserire un elenco di if conditions per controllare le coordinate passate e inviare di nuovo il documento collegato appropriato al browser.

Un file di mappa

È possibile utilizzare un file mappa per memorizzare la posizione dei file HTML in cui si desidera venga indirizzato il lettore quando viene "selezionata" l'area tra le coordinate identificate.

Mantieni il file predefinito nella prima posizione e altri file vengono inseriti corrispondenti a varie coordinate come mostrato di seguito in ismap.map file.

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

In questo modo è possibile assegnare diversi collegamenti a diverse parti dell'immagine e quando si fa clic su tali coordinate, è possibile aprire il documento collegato. Quindi riscriviamo l'esempio sopra usandoismap.map file:

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

Prima di provare l'esempio precedente, devi assicurarti che il tuo server web abbia la configurazione richiesta per supportare il file della mappa immagine.

Sistema di coordinate

Il valore effettivo delle coordinate dipende totalmente dalla forma in questione. Ecco un riepilogo, seguito da esempi dettagliati. È possibile utilizzare qualsiasi strumento disponibile come Adobe Photoshop o MS Paint per rilevare varie coordinate disponibili sull'immagine da utilizzare per ISMAP.

Le righe che iniziano con # sono commenti. Ogni altra riga non vuota è composta da quanto segue:

rect = x1 , y1 , x2 , y2

x 1 e y 1 sono le coordinate dell'angolo superiore sinistro del rettangolo; x 2 e y 2 sono le coordinate dell'angolo inferiore destro.

circle = xc , yc , radius

x c e y c sono le coordinate del centro del cerchio e il raggio è il raggio del cerchio. Un cerchio centrato a 200,50 con un raggio di 25 avrebbe l'attributo coords = "200,50,25"

poly = x1 , y1 , x2 , y2 , x3 , y3 , ... xn , yn

Le varie coppie xy definiscono i vertici (punti) del poligono, con una "linea" disegnata da un punto al punto successivo. Un poligono a forma di diamante con il suo punto superiore a 20,20 e 40 pixel nei suoi punti più larghi avrebbe l'attributo coords = "20,20,40,40,20,60,0,40" .

Tutte le coordinate sono relative all'angolo superiore sinistro dell'immagine (0,0). Ogni forma ha un URL correlato.È possibile utilizzare qualsiasi software di immagine per conoscere le coordinate di diverse posizioni.