Come mappare un'immagine con l'HTML

Tramite: O2O 17/05/2021
Difficoltà:media
19

Introduzione

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.

29

Occorrente

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

Inserire i tag

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.

49

Definire le aree

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.

Continua la lettura
59

Creare un fallback

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.

69

Determinare le dimensioni dell'immagine

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:
image map example.

79

Modificare i punti attivi

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.

89

Guarda il video

99

Consigli

Non dimenticare mai:
  • 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.
Alcuni link che potrebbero esserti utili:

Potrebbe interessarti anche

Naviga con la tastiera

Segnala contenuti non appropriati

Tipo di contenuto
Devi scegliere almeno una delle opzioni
Descrivi il problema
Devi inserire una descrizione del problema
Si è verificato un errore nel sistema. Riprova più tardi.
Segnala il video che ritieni inappropriato
Devi selezionare il video che desideri segnalare
Verifica la tua identità
Devi verificare la tua identità
chiudi
Grazie per averci aiutato a migliorare la qualità dei nostri contenuti

Guide simili

Programmazione

Come iniziare a programmare in HTML 5

Prima di iniziare è bene precisare che con la parola "programmare" riferita al linguaggio HTML 5 è usata in modo improprio. Infatti l'HTML serve a programmare poco e nulla, per le programmazioni e più utile usare i PHP, Javascript, asp ecc.Fatta questa...
Programmazione

Come convertire un testo Word in HTML

Convertire un testo da file formato word a HTML, senza possedere una minima e rudimentale preparazione di base sulla scrittura informatica, sarebbe stato difficoltoso anche solamente 5 o 6 anni fa. Oggi, fortunatamente, è diventato molto più facile grazie...
Programmazione

Come inserire codice javascript in un html

La programmazione informatica è complessa, ma non se si hanno dalla propria le giuste basi che solo uno specialista (o un buon libro di testo) è in grado di dare. Detta in modo molto semplice, la programmazione si basa sulla scrittura di codici attraverso...
Programmazione

Come creare app in HTML5

Un'applicazione Web è alimentata da un browser tramite Internet e viene generalmente creata utilizzando HTML, CSS e JavaScript e può essere servita tramite un browser desktop o mobile. Un'applicazione web può essere costruita per imitare la funzionalità...
Programmazione

Come realizzare un menu a discesa orizzontale con il CSS

In informatica viene chiamato CSS (sigla di “Cascading Style Sheets”, in italiano “fogli di stile a cascata”) il linguaggio usato per definire la formattazione di documenti HTML, XHTML e XML, ad esempio i siti web e le relative pagine web. Tramite questo...
Programmazione

Come iniziare a programmare ed usare Javascript

"Javascript" rappresenta il linguaggio di scripting client-side maggiormente impiegato a livello mondiale. Inizialmente venne sviluppato dalla "Sun Microsystems" e in seguito diventò una raccomandazione standard internazionale famosa come "ECMAScript"....
Programmazione

Come installare Bootstrap 4

Bootstrap è il framework di sviluppo front-end più popolare al mondo e la sua ascesa è in costante aumento. Nel corso degli anni si è tuttavia evoluto, ed oggi la versione 4 rappresenta il top di questa funzionale applicazione web. Inoltre va aggiunto...
Programmazione

Come effettuare il parsing di un file XML

Le nuove tecnologie ITC sfruttano opportuni metadati, per arricchire documenti html o contenuti multimediali. In questa guida, vedremo come effettuare il parsing di un file xml con Java. Questo linguaggio ad oggetti è molto importante per uno sviluppatore....