Come faccio a creare una mappa immagine HTML?
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 desidera creare una singola immagine con più aree o pulsanti e ogni area viene utilizzata per un collegamento diverso. Una mappa di immagini HTML consente al programmatore di specificare determinate aree in cui verrà inserito il collegamento, consentendogli di incorporare diversi collegamenti in un'immagine. Questo viene fatto specificando una forma per il collegamento e dicendo all'HTML quali coordinate devono essere utilizzate per il collegamento.
Le immagini utilizzate per Internet sono misurate in pixel. Conoscere quanti pixel ci sono nell'immagine è il primo passo essenziale per creare una mappa immagine. Ad esempio, viene utilizzata un'immagine rettangolare che ha 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 si chiama 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 prima con la larghezza e poi con l'altezza. Un modo semplice per pensarci è che la prima misura sta dicendo all'HTML quanto lontano dalla destra va dal bordo sinistro e la seconda è come dire quanti pixel scendono. Se il programmatore desidera che un punto sulla mappa sia 10 pixel dal bordo sinistro e 50 pixel verso il basso, le coordinate sarebbero 10,50.
Esistono tre diverse forme che il programmatore può invocare per una mappa immagine HTML: rettangolo, cerchio e poligono. "Rect" sta per rettangolo e il programmatore deve prima digitare le coordinate per l'angolo in alto a sinistra e poi per quello in basso a destra. Un cerchio viene specificato digitando le coordinate in cui inizia il cerchio, quindi il raggio del cerchio. Un poligono viene creato digitando tutte e cinque le coordinate, dall'alto in alto a destra.
La codifica della mappa di immagini HTML è la seguente: <map name = "test">
<area href = "url.html" shape = rect coords = "10,50,20,60">
<area href = "url.html" shape = circle coords = "10,50,4">
<area href = "url.html" forma = poligono coords = "10,50,12,55,15,60,13,65,8,55">
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 posizionata sul sito Web con HTML, il programmatore deve scrivere: usemap = "test". Questo dirà all'immagine quale mappa immagine HTML usare.