Quando un collegamento viene aggiunto a un’immagine in Hypertext Markup Language (HTML), quel collegamento viene aggiunto all’intera immagine. Questo può essere un problema se il programmatore vuole creare un’unica immagine con più aree o pulsanti e ogni area viene utilizzata per un collegamento diverso. Una mappa immagine HTML consente al programmatore di specificare determinate aree in cui andrà il collegamento, consentendogli di incorporare diversi collegamenti in un’immagine. Questo viene fatto specificando una forma per il collegamento e indicando all’HTML quali coordinate devono essere utilizzate per il collegamento.
Le immagini utilizzate per Internet sono misurate in pixel. Sapere quanti pixel ci sono nell’immagine è il primo passo essenziale per creare una mappa immagine. Ad esempio, viene utilizzata un’immagine rettangolare con un’altezza di 400 pixel e una larghezza di 250 pixel. Successivamente, il programmatore deve sapere come misurare con precisione la forma in coordinate affinché la mappa immagine HTML funzioni correttamente.
L’angolo in alto a sinistra è chiamato 0,0 quando si utilizza una mappa immagine HTML. L’angolo in basso a destra in questo caso sarebbe 250,400. Le misurazioni vengono effettuate con prima la larghezza e poi l’altezza. Un modo semplice per pensarci è che la prima misurazione è dire all’HTML quanto lontano a destra andare dal bordo sinistro e la seconda è come dire quanti pixel in giù per andare. Se il programmatore vuole che un punto sulla mappa sia 10 pixel dal bordo sinistro e 50 pixel verso il basso, le coordinate sarebbero 10,50.
Ci sono tre diverse forme che il programmatore può invocare per una mappa immagine HTML: rect, circle e polygon. “Rect” sta per rettangolo e il programmatore deve prima digitare le coordinate per l’angolo in alto a sinistra e poi in basso a destra. Un cerchio viene specificato digitando le coordinate in cui inizia il cerchio e quindi il raggio del cerchio. Un poligono viene creato digitando tutte e cinque le coordinate, dall’alto a destra.
La codifica della mappa immagine HTML funziona così:
Ogni mappa immagine HTML deve avere un nome e la sezione “url.html” è il collegamento in cui quella sezione della mappa immagine condurrà un utente quando fa clic su di essa. Quando l’immagine viene inserita nel sito Web con HTML, il programmatore deve scrivere: usemap=”test”. Questo dirà all’immagine quale mappa immagine HTML usare.