Balise HTML ou XHTML IMG

BALISE IMG

Détails de compatiblilité navigateur HTML pour la balise "img"

Détails de compatiblilité navigateur XHTML pour la balise "img"

Définition

La balise HTML et XHTML IMG permet de mettre une image dans le document html.
Exemple de code :
<IMG>

Exemple :
Exemple de code :
<img src="../images/balise/rouge.gif" width="50" height="50">


Cours Html : Image

Trois formats d'image peuvent être mis sur l'internet :
- le format GIF, il est utilisé pour des images contenant peu de couleur. En effet le nombre de couleur dans le gif est de 256 dont une couleur transparente.
- le format JPG, il est utilisé pour les des images contenant beaucoup de couleur, une photo par exemple. Le jpg doit être en RVB.
- le format PNG, concurrent du gif il peut contenir plus de couleurs que le gif. Cependant, il reste encore peu utilisé. Attention tous les navigateurs ne le reconnaissent pas (gestion de la transparence PNG 24).
javascript [3]
Infos Javascript
Déclaration d'une image:
Exemple de code :
var MonImage=new Image();
MonImage.src="URL/image.gif";

Cours javascript : Les Images

Vous trouverez des informations sur l'objet javascript IMG dans les glossaires javascript DOM :
Document Object Model Core :
Objet Node
Objet Element
Document Object Model HTML :
Objet Img
css [0]
Infos CSS
Aucune cascading style sheets associée.
Visitez la ZONE CSS

Flash MX

La balise HTML <IMG> est reconnue par Flash MX aussi que les attributs HTML HREF, ALIGN, VSPACE et HSPACE.
Un image seule pose problème, elle ne s'afficha pas. Mettez un <br> en plus du code <IMG>.
javascript [0]
Infos Javascript
css [1]
Infos CSS
Voir les feuilles de styles associées :
 
Css par thème

XHTML

La balise XHTML IMG a la même fonction que la balise HTML IMG
Exemple de code :
<img /> ou <img></img>
javascript [0]
Infos Javascript
css [0]
Infos CSS
Aucune cascading style sheets associée.
Visitez la ZONE CSS

Attribut html ou xhtml ALIGN [s]

Détails de compatiblilité navigateur HTML pour l'attribut "align" de la balise "img"

Définition

L'attribut HTML ALIGN de la balise HTML IMG précise l'alignement vertical et horizontal.
Exemple de code :
<IMG ALIGN="middle" > </IMG>


L'attribut HTML ALIGN de la balise HTML IMG peut prendre la valeur pour l'alignement vertical de :
- top : Le haut de l'image est aligné sur la partie supérieure de la ligne où elle se trouve.
- middle : Le milieu de l'image dans le sens vertical est aligné sur le milieu de la ligne où elle se trouve.
- bottom : Le bas de l'image est aligné sur le bas de la ligne où elle se trouve, valeur par défaut.
- absmiddle : Le milieu de l'image dans le sens vertical est aligné sur le milieu de l'objet HTML le plus haut de la ligne. (non XHTML)
- absbottom : Le bas de l'image est aligné avec le bas de l'objet HTML le plus bas de la ligne. (non XHTML)
- baseline : Le bas de l'image est aligné avec la ligne de base du texte de la même ligne.
- textop : Le haut de l'image est aligné avec la partie la plus haute du texte.

L'attribut HTML ALIGN de la balise HTML IMG peut prendre la valeur pour l'alignement horizontal de :
- left : le texte entoure l'image sur la droite et revient en dessous si le texte est très long.
- right : le texte entoure l'image sur la gauche et revient en dessous si le texte est très long.
Exemple de code : align
javascript [7]
Infos Javascript
Vous pouvez connaître ou modifier en javascript l'attribut html ALIGN associé à l'objet javascript :
Exemple de code :
object.align="middle";

La propriété align est une chaîne vide par défaut.
Document Object Model Core :
Objet Element
Element getAttribute
Element setAttribute
Element removeAttribute
Element hasAttribute
Objet Attribut
Document Object Model HTML :
Img align
css [1]
Infos CSS
Voir les feuilles de styles associées :
£vertical-align£
text-align

Attribut html ou xhtml ALT [s]

Détails de compatiblilité navigateur HTML pour l'attribut "alt" de la balise "img"

Détails de compatiblilité navigateur XHTML pour l'attribut "alt" de la balise "img"

Définition

L'attribut HTML et XHTML ALT de la balise HTML et XHTML IMG permet afficher le titre de l'image, lors de son chargement ou si elle n'est pas chargée pour une raison quelconque.
Exemple de code :
<IMG ALT="Text"> </IMG>

Exemple :
l'image n'apparaît pas
L'attribut HTML et XHTML ALT de la balise HTML et XHTML IMG permet d'afficher un petit texte comme sur les liens à côté du mot lorsque le souris est dessus.
Exemple :
l'image apparaît
javascript [7]
Infos Javascript
Vous pouvez connaître ou modifier en javascript la valeur l'attribut html ALT de la balise html IMG, associé à l'objet javascript :
Exemple de code :
object.alt="l'image"

Document Object Model Core :
Objet Element
Element getAttribute
Element setAttribute
Element removeAttribute
Element hasAttribute
Objet Attribut
Document Object Model HTML :
Img alt
css [0]
Infos CSS
Aucune cascading style sheets associée.
Visitez la ZONE CSS

Accessibilité

L'attribut HTML et XHTML ALT de la balise HTML et XHTML IMG est aussi utilisé pour l'accessibilité. Il va permettre de faire la distinction entre les images décoratives et les images utiles (par exemple un bouton). L'attribut HTML et XHTML ALT de la balise HTML et XHTML IMG devra être vide si c'est une image décorative, dans le cas inverse il devra contenir un descriptif de la fonction du bouton (ex: valider la demande).
Les images utiles sont généralement des images ayant une zone cliquable (MAP) ou étant dans un lien (A) mais cela peut être aussi une image comportant d'un graphique.
javascript [0]
Infos Javascript
css [0]
Infos CSS
Aucune cascading style sheets associée.
Visitez la ZONE CSS

XHTML

L'attribut XHTML ALT est obligatoire en XHTML.
Mais, son oublie ne gène pas l'affichage.
javascript [0]
Infos Javascript
css [0]
Infos CSS
Aucune cascading style sheets associée.
Visitez la ZONE CSS

Attribut html ou xhtml BORDER [s]

Détails de compatiblilité navigateur HTML pour l'attribut "border" de la balise "img"

Définition

L'attribut HTML BORDER de la balise HTML IMG, spécifie l'épaisseur de la bordure de l'image.
Exemple de code :
<IMG BORDER="1"> </IMG>

L'unité par défaut est le pixel.
Si BORDER=0 alors il n'y a pas de bordure.
Exemple de code : border
javascript [1]
Infos Javascript
Vous pouvez connaître ou modifier en javascript la valeur l'attribut html BORDER associé à l'objet javascript :
Exemple de code :
object.border

Chaîne vide par défaut.
Document Object Model HTML :
Img border
css [1]
Infos CSS
Voir les feuilles de styles associées :
£border-color£
border

XHTML

L'attribut HTML BORDER est remplacé par une feuille de style border
javascript [7]
Infos Javascript
css [1]
Infos CSS

Attribut html ou xhtml CLASS [s]

Détails de compatiblilité navigateur HTML pour l'attribut "class" de la balise "img"

Détails de compatiblilité navigateur XHTML pour l'attribut "class" de la balise "img"

Définition

L'attribut HTML CLASS de la balise HTML IMG, permet d'identifier la balise.
Exemple de code :
<IMG CLASS="Nom">

Utilisé pour les cascading style sheets.
javascript [7]
Infos Javascript
Vous pouvez connaître ou modifier en javascript la valeur de l'attribut CLASS associé à l'objet :
Exemple de code :
object.className

Document Object Model Core :
Objet Element
Element getAttribute
Element setAttribute
Element removeAttribute
Element hasAttribute
Objet Attribut
Document Object Model HTML :
Element className
css [1]
Infos CSS
Voir les feuilles de styles associées :
 
Cours css

Attribut html ou xhtml DIR [s]

Détails de compatiblilité navigateur HTML pour l'attribut "dir" de la balise "img"

Détails de compatiblilité navigateur XHTML pour l'attribut "dir" de la balise "img"

Définition

L'attribut HTML DIR de la balise HTML IMG spécifie le sens de lecture.
Exemple de code :
<IMG DIR="ltr"> </IMG>

L'attribut HTML DIR de la balise HTML IMG peut prendre la valeur de :
- LTR: de la gauche vers la doite.
- RTL: de la droite vers la gauche (pour l'hébreu par exemple).
javascript [7]
Infos Javascript
Vous pouvez connaître ou modifier en javascript la valeur de l'attribut html DIR associé à l'objet javascript :
Exemple de code :
object.dir

Document Object Model Core :
Objet Element
Element getAttribute
Element setAttribute
Element removeAttribute
Element hasAttribute
Objet Attribut
Document Object Model HTML :
Element dir
css [0]
Infos CSS
Aucune cascading style sheets associée.
Visitez la ZONE CSS

Attribut html ou xhtml HEIGHT [s]

Détails de compatiblilité navigateur HTML pour l'attribut "height" de la balise "img"

Détails de compatiblilité navigateur XHTML pour l'attribut "height" de la balise "img"

Définition

L'attribut HTML et XHTML HEIGHT de la balise HTML et XHTML IMG spécifie la hauteur de l'image.
Exemple de code :
<IMG HEIGHT="100"> </IMG>
L'unité par défaut est le pixel.
javascript [7]
Infos Javascript
Vous pouvez connaître ou modifier en javascript la valeur de l'attribut HEIGHT associé à l'objet :
Exemple de code :
object.height

Document Object Model Core :
Objet Element
Element getAttribute
Element setAttribute
Element removeAttribute
Element hasAttribute
Objet Attribut
Document Object Model HTML :
Img height
css [0]
Infos CSS
Aucune cascading style sheets associée.
Visitez la ZONE CSS

Attribut html ou xhtml HSPACE [s]

Détails de compatiblilité navigateur HTML pour l'attribut "hspace" de la balise "img"

Définition

L'attribut HTML HSPACE de la balise HTML IMG gère l'espace horizontal entre l'image et ce qui l'entoure.
Exemple de code :
<IMG HSPACE="1"> </IMG>
L'attribut HTML HSPACE de la balise HTML IMGaccepte comme valeur un entier dont l'unité par défaut est le pixel.
Exemple de code : hspace
javascript [7]
Infos Javascript
Vous pouvez connaître ou modifier en javascript l'attribut html HSPACE de la balise html IMG associé à l'objet javascript :
Exemple de code :
object.hspace=10;
0 pour internet explorer et -1 pour netscape par défaut.
Document Object Model Core :
Objet Element
Element getAttribute
Element setAttribute
Element removeAttribute
Element hasAttribute
Objet Attribut
Document Object Model HTML :
Img hspace
css [1]
Infos CSS
Voir les feuilles de styles associées :
£margin-right£
margin
margin-left

XHTML

L'attribut HTML HSPACE est remplacé par la feuille de style (css) MARGIN
javascript [0]
Infos Javascript
css [1]
Infos CSS
Voir les feuilles de styles associées :
£margin-right£
margin
margin-left

Attribut html ou xhtml ID [s]

Détails de compatiblilité navigateur HTML pour l'attribut "id" de la balise "img"

Détails de compatiblilité navigateur XHTML pour l'attribut "id" de la balise "img"

Définition

L'attribut HTML ID de la balise HTML IMG, permet d'identifier la balise.
Exemple de code :
<IMG ID="Nom">

Utilisé pour les cascading style sheets et le javascript.
javascript [7]
Infos Javascript
Grâce à l'attribut html ID, vous pouvez identifier un objet javascript.
Pour avoir accès à ses propriétés ou méthodes vous devez d'abord identifier cet objet, vous pouvez utiliser :
- pour les versions d'internet explorer > 4
Exemple de code :
document.all.NomId
document.all["NomId"]

- pour les versions de internet explorer > 5 et pour netscape 6 et plus
Exemple de code :
document.getElementById("NomId");

Dans les exemples javascript des attributs de la balise html IMG,
Exemple de code :
object
remplace les codes ci-dessus.
Par exemple :
Exemple de code :
object.className
revient à faire
Exemple de code :
document.getElementById("NomId").className;
ou tout autre code permettant de recupérer un objet javascript (document.all, getElementsByTagName, getElementsByName...).

Je vous conseille d'utiliser plutôt :
Exemple de code :
document.images.NomName
document.images["NomName"]

Document Object Model Core :
Objet Element
Element getAttribute
Element setAttribute
Element removeAttribute
Element hasAttribute
Objet Attribut
Document Object Model HTML :
Element id
css [1]
Infos CSS
Voir les feuilles de styles associées :
 
Cours css

Attribut html ou xhtml ISMAP [s]

Détails de compatiblilité navigateur HTML pour l'attribut "ismap" de la balise "img"

Détails de compatiblilité navigateur XHTML pour l'attribut "ismap" de la balise "img"

Définition

L'attribut HTML et XHTML ISMAP de la balise HTML et XHTML IMG précise qu'il s'agit d'une image cliquable côté serveur.
Exemple de code :
<a HREF="setpoint.html"><IMG ISMAP SRC="image.gif"></a>

L'attribut HTML et XHTML ISMAP de la balise HTML et XHTML IMG est utilisé dans le cas où la création de zones cliquables avec des maps "USEMAP" serai trop complexe.
L'attribut HTML et XHTML ISMAP de la balise HTML et XHTML IMG s'utilise toujours dans un lien. Lorsque je clique sur l'image les coordonnées X et Y de la souris dans l'image sont transmises, on optient comme url : setpoint.html?coordonnex,coordonney
javascript [7]
Infos Javascript
css [0]
Infos CSS
Aucune cascading style sheets associée.
Visitez la ZONE CSS

Attribut html ou xhtml LANG [s]

Détails de compatiblilité navigateur HTML pour l'attribut "lang" de la balise "img"

Détails de compatiblilité navigateur XHTML pour l'attribut "lang" de la balise "img"

Définition

L'attribut HTML et XHTML LANG de la balise HTML et XHTML IMG permet de spécifier la langue utilisée.
Exemple de code :
<IMG LANG="fr"> </IMG>

L'attribut HTML et XHTML LANG de la balise HTML et XHTML IMG peut prendre entre autre la valeur de :
- fr, français.
- en, anglais.

Exemple ~~> Exemple LANG
javascript [7]
Infos Javascript
Vous pouvez connaître ou modifier en javascript l'attribut html LANG associer à l'objet javascript :
Exemple de code :
object.lang

Document Object Model Core :
Objet Element
Element getAttribute
Element setAttribute
Element removeAttribute
Element hasAttribute
Objet Attribut
Document Object Model HTML :
Element lang
css [0]
Infos CSS
Aucune cascading style sheets associée.
Visitez la ZONE CSS

XHTML

Lorsque vous mettez l'attribut XHTML lang, vous devez obligatoirement mettre l'attribut XHTML xml:lang.
L'attribut XHTML xml:lang peut prendre les même valeurs que l'attribut XHTML lang.
Exemple de code :
<img lang="fr" xml:lang="fr" />
javascript [0]
Infos Javascript
css [0]
Infos CSS
Aucune cascading style sheets associée.
Visitez la ZONE CSS
Page suivante