HTML -Utilizzare ISMAP

Per usare un'immagine con l'attributo ismap, è sufficiente mettere la vostra immagine all'interno di un collegamento ipertestuale e utilizzare l' attributo ismap, quando l'utente fa click in un punto all'interno dell'immagine, il browser passa le coordinate del puntatore del mouse al server web tramite l'URL specificato nel tag <a>. Il server usa le coordinate del puntatore del mouse per determinare a quale documento si dovrà reindirizzare l' utente.

Quando viene utilizzato ismap, l' attributo href del tag <a> deve contenere l'URL di un applicazione server come uno script cgi o PHP in grado di processare la richiesta in base alle coordinate passate.

Le coordinate del puntatore del mouse vengono indicate dal numero di pixel a partire dall' angolo in alto a sinistra dell' immagine, a partire da (0,0). Le coordinate, precedute da un punto interrogativo, sono aggiunte alla fine dell' URL.

Si può vedere un esempio clickando nella parte che va da 50px sopra e 30 pixel sotto l'angolo in alto a sinistra della seguente immagine:

Click following link

Che è stato generato con il seguente 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>

Adesso il browser invierà i seguenti parametri di ricerca al web server:

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

Queste coordinate possono essere processate una per una in due modi:

Utilizzando un file CGI (o un file PHP se non si stanno utilizzando file CGI)
Utilizzando un file map

Utilizzando un file CGI o PHP

A seguire il codice perl per lo script ismap.cgi 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;

Dato che tramite lo script è possibile gestire le coordinate passate, si può creare un elenco di if conditions per controllare le coordinate passate e restituire il link correlato al browser.

Utilizzando un file map

Un file di mappa (file map) può essere utilizzato per memorizzare la posizione dei file HTML che si desidera che venga portato al lettore quando l'area tra le coordinate identificate viene "cliccata".

Si inserisce il file di default nella prima posizione e gli altri file vengono messi in corrispondenza alle diverse coordinate, come mostrato di seguito nel file ismap.map.

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

In questo modo si possono assegnare link differenti alle diverse parti dell' immagine e quando viene effettuato un click in quelle coordinate, si apre il documento collegato. Adesso riscriviamo l'esempio precedente utilizzando il file ismap.map:

<!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, assicurati che il tuo web server è configurato correttamente per supportare i file map.

Sistema di Coordinate

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

Una riga che inizia con # indica un commento. Tutte le altre righe sono così formate:

rect = x₁ , y₁ , x₂ , y₂: x₁ e y₁ sono le coordinate dell'angolo superiore sinistro del rettangolo; x₂ and y₂ sono le coordinate dell'angolo in basso a destra.
circle = x_c , y_c , radius: x_c e y_c sono le coordinate del centro del cerchio, e radius è il raggio del cerchio. Un cerchio centrato a 200, 50 con un raggio di 25 dovrebbe avere come attributo coords="200,50,25"
poly = x₁ , y₁ , x₂ , y₂ , x₃ , y₃ , ... x_n , y_n: Le varie coppie x-y 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 attraverso i suoi punti più larghi dovrebbe avere come attributo coords="20,20,40,40,20,60,0,40".

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

html_image_links.htm