Come mappare un'immagine con l'HTML

In Informatica, grazie ad un linguaggio di formattazione di dominio pubblico, è possibile gestire la struttura, la visualizzazione grafica, di un contenuto web. In questa guida vi illustreremo come "mappare", nello specifico, un'immagine con il linguaggio HTML.
L'HTML è un linguaggio di markup usato per programmare pagine e documenti ipertestuali nel World Wide Web. La mappatura di un'immagine dipende dall'inserimento di link esterni in varie zone dell'immagine stessa, calcolate ovviamente in pixel. È possibile, per esempio, mappare l'immagine di un computer, o la scheda video dello stesso, per ricevere informazioni e spiegazioni sul funzionamento. Vediamo allora come mappare un'immagine con l'HTML.

• Documento di testo o Word
• Immagine da mappare
• PC

Il tag map e area href (riferimento ipertestuale), vi consentirà di scrivere il link su cui si verrà indirizzati una volta cliccato nell'area desiderata; per questo motivo, entrambi i tag dispongono di diversi attributi, indispensabili per il funzionamento del sistema di ricerca del link. Il tag shape è quello che vi permette di inserire l'area e la zona dell'immagine contenente un certo link. I dati, come accennavamo nell'introduzione, sono calcolati in pixel. Le forme dell'area cliccabile possono essere di diversi tipi: quadrate, rettangolari, o a forma di poligono (che includono le forme irregolari più disparate!). Tutte, comunque, si trovano introducendo delle specifiche coordinate.

Per definire le aree, create il punto attivo, ovvero la forma dello strumento. Si aprirà la finestra di ispezione del punto: cliccate sull'icona della "Cartella" per selezionare il file o il percorso da aprire. Scegliete i nomi di destinazione, il tipo di collegamento, ed inserite l'URL. Salvate con nome la struttura. Dopo aver completato la mappatura dell'immagine, cliccate sull'area vuota del documento per modificare la finestra "Proprietà". Come in tutti i codici HTML, è presente il tag (marcatore o etichetta), che lo fa riconoscere dal sito. Il comando della mappatura è caratterizzato fondamentalmente da sei tag: map name, area href, alt, title, shape e img src, che si inseriscono nel corpo del codice.

La creazione di un fallback può essere semplice come creare una tabella o un elenco dei collegamenti contenuti nella mappa immagine e posizionarli direttamente sotto la mappa stessa. Tuttavia, il più delle volte è proprio la tabella a creare un fallback per gli utenti che non possono vedere o utilizzare la mappa. Per questo motivo, dovrete rendere la mappa reattiva in modo che cambi le dimensioni in base a quelle del dispositivo utilizzato per visualizzare la mappa.

Normalmente, le immagini sono larghe 1000 x 664 pixel di altezza; tuttavia, se siete alle prime armi sarà meglio utilizzare un'immagine che sia la metà di quella dimensione, ovvero 500 per 332 pixel. Quando create una mappatura dell'immagine, è importante ricordare che se modificate la dimensione dell'immagine dovrete cambiare anche le coordinate dell'area. Questo perché le coordinate dell'area sono legate alle dimensioni e alla scala originali dell'immagine. Per convertire l'immagine nella dimensione sopracitata, potete usare il seguente codice:
.

Dopo questo primo passaggio, potrete modificare tranquillamente i punti attivi della vostra mappa immagine, effettuando semplici operazioni, sia per spostarli, sia per ridimensionarli. La procedura verrà facilitata dalla presenza di un area di lavoro, con strumenti appropriati. Esercitatevi prima di creare le vostre mappe cliccabili, approfondendo la conoscenza del linguaggio HTML.

• Se la forma è un rettangolo, inserite le coordinate x e y del vertice in alto a sinistra e del vertice in basso a destra. Se la forma è un cerchio, inserite le coordinate x e y del centro e la misura del raggio. Se la forma è un poligono, inserite le coordinate di tutti i punti del poligono a coppie.

• Le immagini cliccabili
• Come creare una mappa d'immagine
• Mappe di immagini HTML

• Come convertire un testo Word in HTML
• Come creare un form in HTML