HTML: il tag <area>

Il tag HTML <area> definisce una zona all’interno di una mappa immagine (una mappa immagine è un’immagine con varie zone cliccabili).

Definizione e utilizzo

Come già accennato il tag HTML <area> serve quindi per definire delle zone all’interno di una mappa immagine.

L’elemento <area> si trova sempre all’interno del tag HTML <map>.

La sintassi è la seguente:

            <img src ="images/solarsystem.jpg" width="500" height="445" alt="Solar System" usemap ="#solarsystem" />
            <map name="solarsystem">
                <area shape="circle" coords="205,287,55" href="sun.htm" alt="Sun" title="Sun" />
                <area shape="circle" coords="61,119,21" href="jupiter.htm" alt="Jupiter" title="Jupiter" />
                <area shape="circle" coords="427,118,11" href="uranus.htm" alt="Uranus" title="Uranus" />
                <area shape="circle" coords="122,422,8" href="earth.htm" alt="Earth" title="Earth" />
                <area shape="circle" coords="442,357,27" href="saturn.htm" alt="Saturn" title="Saturn" />
            </map>

Esempi di utilizzo del tag <area>

Ecco alcuni esempi di utilizzo del tag <area>.

Gli attributi del tag <area>

Attributi obbligatori

DTD (Document Type Definition, Definizione del tipo di documento): indica in quali Doctype il tag è consentito. S=Strict, T=Transitional e F=Frameset.

Attributo Valore Descrizione DTD
alt testo
Specifica un testo alternativo per un’area. STF

Attributi opzionali

Il tag <area> supporta i seguenti attributi opzionali:

Attributo Valore Descrizione DTD
coords coordinate Può essere utilizzato per specificare le coordinate in pixel dell’area. STF
href URL Può essere utilizzato per specificare la destinazione del collegamento dell’area. STF
nohref nohref Può essere utilizzato per specificare che l’area non è un link. STF
shape default
rect
circle
poly
Può essere utilizzato per specificare la forma dell’area. Il valore può essere rect (rettangolare), circle (circolare), poly (poligonale) o di default. STF
target _blank
_parent
_self
_top
Specifica dove verrà aperta la pagina linkata nell’attributo href. STF

Attributi standard

Il tag <area> supporta i seguenti attributi standard:

Attributo Valore Descrizione DTD
class nome classe Specifica il nome di una classe per un elemento. STF
dir ltr
rtl
Specifica la direzione del testo all’interno di un elemento. STF
id id Specifica un id univoco per un elemento. STF
lang codice lingua Può essere utilizzato per indicare il codice della lingua con cui è scritta l’abbreviazione. STF
style definizione stile Specifica uno stile in linea per un elemento. STF
title testo Può essere utilizzato per fornire la forma completa o espansa dell’abbreviazione. STF
xml:lang codice lingua Può essere utilizzato per indicare il codice della lingua con cui è scritta l’abbreviazione in un documento XHTML. STF

Browser supportati

Il tag <area> è supportato da tutti i principali browser.

Firefox Safari Chrome Opera IE 8 IE 7 IE 6
SI SI SI SI SI SI SI
Tag: , ,

L'autore

Nando è fondatore di Edi Group, società di Comunicazione e Formazione fondata nel 2005. È inoltre Trainer Microsoft e docente di Webdesign con anni di esperienza, anche in qualità di progettista, in corsi di Formazione Professionale regionali e privati. È stato speaker in diverse prestigiose conferenze, anche per conto di Microsoft Italia. Tiene abitualmente corsi di formazione presso le aziende. È autore di diversi libri sul Web Design, in italiano ed inglese. +

Sito web dell'autore | Altri articoli scritti da

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

  • HTML: Il tag <form>

    Il tag HTML <form> definisce un modulo HTML per l'input dell'utente. Definizione e utilizzo Il tag HTML <form> può contenere...

  • HTML: Il tag <em>

    Il tag HTML <em> permette di formattare una parte di testo in corsivo. Definizione e utilizzo Il tag <em>, insieme ai tag...

  • HTML: Il tag <dl>

    Il tag HTML <dl> serve a creare una lista di definizioni. Definizione e utilizzo Il tag <dl> viene utilizzato per creare una lista di...