Come mappare un'immagine con l'HTML

tramite: O2O
Difficoltà: media
16

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

26

Occorrente

  • Documento di testo o Word, Immagine da mappare
36

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.

46

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à".

Continua la lettura
56

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.

66

Consigli

Non dimenticare mai:
  • Se la forma è un rettangolo : inserendo le coordinate x,y del vertice in alto a sinistra e del vertice in basso a destra. Se la forma è un cerchio : inserendo le coordinate x e y del centro e la misura del raggio. Se la forma è un poligono : inserendo le coordinate di tutti i punti del poligono a coppie.
Alcuni link che potrebbero esserti utili:

Potrebbe interessarti anche

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.
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 creare immagini vettoriali SVG con HTML5

In questa guida vedremo come creare immagini vettoriali SVG con HTML5. Molti browser Internet, tra cui Microsoft Internet Explorer 9 e il supporto HTML5 sono utili allo scopo. Gli sviluppatori possono approfittare delle nuove caratteristiche, come la...
Programmazione

HTML: 10 cose da sapere

HTML è il principale linguaggio di pubblicazione di pagine Web. Grazie a questo tipo di linguaggio è possibile creare link tra le pagine, decidere l'importanza da assegnare ai testi, inserire immagini, e tanto altro ancora. La conoscenza dell'HTML è...
Programmazione

Guida: Programmare in HTML5

L'HTML5 è uno scripting-language usato esclusivamente per costruire pagine Internet. Universalmente diffuso e abbastanza semplice da imparare, consente di predisporre contenuti da esporre sul Web facilmente e dotati di caratteristiche anche sofisticate....
Programmazione

HTML5: 10 cose da sapere

Chiunque di voi abbia mai avuto una minima esperienza del mondo informatico saprà senza alcun dubbio che esistono tantissimi linguaggi per programmare in questo ambito, ad esempio il C++, il CSS, il Pyton e l'HTML, ovviamente ognuno di questi offre vantaggi...
Programmazione

Come creare animazioni con HTML5

Dalla sua nascita, il linguaggio HTML ha subito diverse modifiche e miglioramenti che, col passare del tempo, l'hanno portato alla sua ultima versione: ovvero l'HTML5. Inizialmente HTML veniva usato per la creazione di siti web statici e anche molto spartani...
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 creare un sito web in HTML5

L’ HTML5 è un insieme di tecnologie volte allo sviluppo e alla creazione di web application e pagine web. Le novità introdotte sono molteplici, che tendono a semplificare la creazione di un sito, utilizzando markup e semantica più facile. Uno tra...
Programmazione

Guida alle basi di Html

Oggi programmare è diventata una delle cose più importanti da saper fare. Infatti si è calcolato che la programmazione rispetto agli ultimi 10 anni è aumentata del 70% e la richiesta di giovani programmatori nel panorama lavorativo è anch'esso in...
I presenti contributi sono stati redatti dagli autori ivi menzionati a solo scopo informativo tramite l’utilizzo della piattaforma www.o2o.it e possono essere modificati dagli stessi in qualsiasi momento. Il sito web, www.o2o.it e Arnoldo Mondadori Editore S.p.A. (già Banzai Media S.r.l. fusa per incorporazione in Arnoldo Mondadori Editore S.p.A.), non garantiscono la veridicità, correttezza e completezza di tali contributi e, pertanto, non si assumono alcuna responsabilità in merito all’utilizzo delle informazioni ivi riportate. Per maggiori informazioni leggi il “Disclaimer »”.