Attribut mediade la balise <area> HTML
Balise HTML <area>Exemples
Carte image avec zones cliquables :
<img src="planets.gif.html" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun"
href="sun.htm.html" media="screen and (min-color-index:256)">
</map>
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun"
href="sun.htm.html" media="screen and (min-color-index:256)">
</map>
Essayez-le vous-même »
Prise en charge des navigateurs
Tous les principaux navigateurs prennent en charge l'attribut media
Définition et utilisation
L'attribut media indique sur quel appareil l'URL cible sera affichée.
Cet attribut est utilisé pour afficher l'URL spécifiée sur un appareil spécifié (comme l'iPhone), un support audio ou un support d'impression.
Cet attribut peut accepter plusieurs valeurs.
L'attribut media n'est requis que si l'attribut href est utilisé.
Différences entre HTML 4.01 et HTML5
L'attribut media est nouveau dans HTML5.
Syntaxe
<area media="value">
Opérateurs possibles
| Valeur | Description |
|---|---|
| et | Spécifie l'opérateur AND |
| not | Spécifie l'opérateur NOT |
| , | Spécifie l'opérateur OR |
Appareils
| Valeur | Description |
|---|---|
| all | Par défaut. Convient à tous les appareils. |
| aural | Synthétiseurs vocaux |
| braille | Dispositifs de retour braille |
| handheld | Appareils portables (petit écran, bande passante limitée) |
| projection | Projection |
| Mode d'aperçu avant impression / pages imprimées | |
| écran | Écran d'ordinateur |
| tty | Téléscripteurs et médias similaires utilisant des grilles de caractères à chasse fixe |
| tv | Appareils de type télévision (faible résolution, capacité de défilement limitée) |
Valeur
| Valeur | Description |
|---|---|
| width | La largeur de la zone d'affichage spécifiée. Utilise généralement les préfixes "min-" et "max-". Exemple : media="screen and (min-width:500px)" |
| height | La hauteur de la zone d'affichage spécifiée. Utilise généralement les préfixes "min-" et "max-". Exemple : media="screen and (max-height:700px)" |
| device-width | Spécifie la largeur de l'affichage cible/du papier imprimé Utilise généralement les préfixes "min-" et "max-". Exemple : media="screen and (device-width:500px)" |
| device-height | Spécifie la hauteur de l'affichage cible/du papier imprimé Utilise généralement les préfixes "min-" et "max-". Exemple : media="screen and (device-height:500px)" |
| Orientation | Spécifie l'orientation de l'affichage/du papier cible. Valeurs possibles : "portrait" ou "landscape" Exemple : media="all and (orientation: landscape)" |
| aspect-ratio | Le rapport largeur/hauteur de la zone d'affichage cible spécifiée. Utilise généralement les préfixes "min-" et "max-". Exemple : media="screen and (aspect-ratio:16/9)" |
| device-aspect-ratio | Le rapport device-width/device-height de la zone d'affichage cible spécifiée. Utilise généralement les préfixes "min-" et "max-". Exemple : media="screen and (aspect-ratio:16/9)" |
| color | Spécifie le nombre de bits par couleur pour l'affichage cible. Utilise généralement les préfixes "min-" et "max-". Exemple : media="screen and (color:3)" |
| color-index | Spécifie le nombre de couleurs que l'affichage cible peut gérer. Utilise généralement les préfixes "min-" et "max-". Exemple : media="screen and (min-color-index:256)" |
| monochrome | Spécifie le nombre de bits par pixel dans un tampon de trame monochrome. Utilise généralement les préfixes "min-" et "max-". Exemple : media="screen and (monochrome:2)" |
| résolution | Spécifie la densité de pixels de l'affichage cible/du papier (DPI ou DPCM). Utilise généralement les préfixes "min-" et "max-". Exemple : media="print and (resolution:300dpi)" |
| scan | Spécifie la méthode de balayage d'un écran de télévision. Les valeurs possibles sont "progressive" et "interlace". Exemple : media="tv and (scan:interlace)" |
| grid | Spécifie si le périphérique de sortie est une grille ou une bitmap La valeur de la grille est "1", les autres sont "0" Exemple : media="handheld and (grid:1)" |
Autres extensions