HTML - Link nelle Immagini

Abbiamo visto come creare link testuali e come utilizzare le immagini in una pagina web. Adesso vedremo come utilizzare le immagini per creare collegamenti ipertestuali (Hyperlink).

Esempio

Usare un immagine come collegamento ipertestuale è molto semplice, basterà infatti inserire un immagine all'interno di un hyperlink piuttosto che il testo, come mostrato di seguito:

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

Produrrà il seguente risultato, where you can click on the images to reach to the home page of Tutorials Point.

Click following link

Questo è l' esempio più semplice per creare dei link utilizzando immagini. In seguito vedremo come utilizzare dei collegamenti ipertestuali nelle immagini che siano mouse-sensitive.

Immagini Mouse-Sensitive

Gli standard HTML e XHTML forniscono la possibilità di incorporare diversi link all' interno di una singola immagine. Si possono creare diversi link in una stessa immagine utilizzando le coordinate del mouse all' interno dell' immagine. Una volta abbiamo collegato diversi link a diverse coordinate, possiamo fare clic su diverse parti dell'immagine per aprire i documenti di destinazione. Queste immagini mouse-sensitive, sono conosciute come immagini mappa (image map).

Ci sono due modi per creare immagini mappa:

Server-side image maps - This is enabled by the ismap attribute of the <img> tag and requires access to a server and related image-map processing applications.
Client-side image maps - This is created with the usemap attribute of the <img> tag, along with corresponding <map> and <area> tags.

Image Map Lato-Server

Per utilizzare 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 20px sopra e 30 pixel sotto l'angolo in alto a sinistra della seguente immagine:

Click following link

Che sono stati generati dai seguenti pezzi 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>

Adesso il browser invierà i seguenti parametri di ricerca al web server che potrà processarli tramite loo script ismap.cgi o un file map e potrai quindi collegare un qualsiasi documento a quelle coordinate:

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

In questo modo si possono assegnare link differenti alle diverse parti dell' immagine e quando verrà effettuato un click in una di quelle coordinate, si aprirà il documento relativo. Per saperne di più riguardo l'attributo ismap, puoi andare alla pagina HTML -Utilizzare ISMAP

Nota: Imparerai la programmazione CGI quando studiarai la programmazione PERL. Potrai scrivere il tuo script per processare le coordinate passate usando PHP o qualsiasi altro script. Per adesso concentriamoci nello studio di HTML ed in seguito potrai rivistare questo capitolo.

Image Maps Lato-Client

Le image map lato-client sono utilizzabili tramite l' attributo usemap del tag <img /> e definite da speciali tag che ne estendono le funzioni: <map> e <area>.

L' immagine da dover utilizzare viene inserita nella pagina utilizzando il tag <img />, come si farebbe per una normale immagine, eccetto che essa trasporta un attributo extra chiamato usemap. Il valore dell' attributo usemap è il valore che verrà utilizzato nel tag <map> per collegare la mappa ai tag immagine. Il tag <map> insieme al tag <area> definisce tutte le coordinate dell' immagine e i corrispondenti link.

Il tag <area> all' interno del tag map, definisce la forma e le coordinate e per definire i confini di ciascun hotspot cliccabile disponibile sull'immagine. A seguire un esempio:

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

Sistema di Coordinate

Il valore effettivo delle coordinate dipende totalmente dalla forma in questione. Ecco un sommario, seguito da alcuni esempi dettagliati:

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.