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 LONGDESC [s]

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

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

Définition

L'attribut HTML et XHTML LONGDESC de la balise HTML et XHTML IMG précise un lien vers une description longue de l'image.
Exemple de code :
<IMG LONGDESC="url.html"> </IMG>

L'attribut HTML et XHTML LONGDESC de la balise HTML et XHTML IMG accepte une url relative ou absolue.
L'attribut HTML et XHTML LONGDESC de la balise HTML et XHTML IMG est utilisé essentiellement pour l'accessibilité. La page sur laquelle pointe le lien ne devra pas contenir d'image mais que du texte.
javascript [7]
Infos Javascript
Vous pouvez connaître ou modifier en javascript la valeur de l'attribut html LONGDESC de la balise IMG associer à l'objet javascript :
Exemple de code :
object.longDesc="mapage.html";
La propriété longDesc a comme valeur 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 longDesc
css [0]
Infos CSS
Aucune cascading style sheets associée.
Visitez la ZONE CSS

Attribut html ou xhtml NAME [s]

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

Définition

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

Utilisé pour le javascript.
javascript [7]
Infos Javascript
Grâce à l'attribut html NAME, 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 :
Exemple de code :
document.images.NomName
Vous pouvez connaître ou modifier en javascript l'attribut html NAME associé à l'objet javascript :
Exemple de code :
objet.name

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

Attribut html ou xhtml SRC [o]

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

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

Définition

L'attribut HTML et XHTML SRC de la balise HTML et XHTML IMG spécifie l'URL de l'image à charger.
Exemple de code :
<IMG SRC="URL/image.gif"> </IMG>
javascript [7]
Infos Javascript
Vous pouvez changer l'image grâce :
Exemple de code :
document.images.Nom.src = MonImage.src;
//ou
document.images.Nom.src = "monimage.gif";

Document Object Model Core :
Objet Element
Element getAttribute
Element setAttribute
Element removeAttribute
Element hasAttribute
Objet Attribut
Document Object Model HTML :
Img src
Infos Javascript
Vous pouvez tester si une image n'a pas pu être chargée.
Pour cela vous devez utiliser pour internet explorer la propriété javascript complete de l'objet Dom HTML IMG et naturalHeight pour firefox et netscape.
La propriété javascript complete existe sous pour firefox et netscape mais renvoie toujours true donc nous naturalHeight qui renvoie la vraie taille de l'image soit 0 si on ne la pas trouvée.

Le script ci-dessous teste toutes les images et charge une autre image si l'image n'existe pas. Testé sous pc FireFox 2, IE 6 et Netscape 7.1
Exemple de code :
function remplace404Image(){
  /:Parcours toutes les images
  for(i=0;i<document.images.length;i++){
    var is_complete = true;
    //Teste si naturalHeight existe
    if(typeof document.images[i].naturalHeight != "undefined"){
      is_complete =(document.images[i].naturalHeight==0)? false : true;
    }else{
      is_complete = document.images[i].complete;
    }
    if(is_complete==false){
      document.images[i].src="monimage.gif";
    }
  }
}
window.onload=remplace404Image;
css [0]
Infos CSS
Aucune cascading style sheets associée.
Visitez la ZONE CSS

Attribut html ou xhtml STYLE [s]

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

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

Définition

L'attribut HTML STYLE de la balise HTML IMG permet de définir des cascading style sheets dans la balise même.
Exemple de code :
<IMG STYLE="text-decoration:underline"> </IMG>
javascript [7]
Infos Javascript
Vous pouvez connaître ou modifier en javascript la valeur l'attribut html STYLE associé à l'objet javascript :
Exemple de code :
object.cssText
Attention
Exemple de code :
object.cssText
ne vous renvoie que le texte de l'attribut html style declaré dans la balise.
Document Object Model Core :
Objet Element
Element getAttribute
Element setAttribute
Element removeAttribute
Element hasAttribute
Objet Attribut
Document Object Model HTML :
Element style
css [1]
Infos CSS
Voir les feuilles de styles associées :
 
Cours css

Attribut html ou xhtml TITLE [s]

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

Définition

L'attribut HTML TITLE de la balise HTML IMG, permet d'afficher un petit texte comme sur les liens à côté du mot lorsque le souris est dessus.
Exemple de code :
<IMG TITLE="Texte"> </IMG>
javascript [7]
Infos Javascript
Vous pouvez connaître ou modifier en javascript la valeur de l'attribut html TITLE associer à l'objet javascript :
Exemple de code :
object.title

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

Attribut html ou xhtml USEMAP [s]

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

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

Définition

L'attribut HTML et XHTML USEMAP de la balise HTML et XHTML IMG permet d'associer l'image à une Map (zone réactive pour les liens).
Exemple de code :
<IMG USEMAP="Nom"> </IMG>

Voir la balise HTML et XHTML <MAP>.
Exemple de code : usemap
javascript [7]
Infos Javascript
Vous pouvez connaître ou modifier en javascript l'attribut html USEMAP associé à l'objet javascript :
Exemple de code :
object.useMap
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 useMap
css [0]
Infos CSS
Aucune cascading style sheets associée.
Visitez la ZONE CSS

Attribut html ou xhtml VSPACE [s]

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

Définition

L'attribut HTML VSPACE de la balise HTML IMG gère l'espace vertical entre l'image et ce qui l'entoure.
Exemple de code :
<IMG VSPACE="1"> </IMG>
L'attribut HTML VSPACE de la balise HTML IMG accepte comme valeur un nombre entier dont l'unité par défaut est le pixel.
Exemple de code : vspace
javascript [7]
Infos Javascript
Vous pouvez connaître ou modifier en javascript l'attribut html VSPACE de la balise html IMG associé à l'objet javascript :
Exemple de code :
object.vspace
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 vspace
css [1]
Infos CSS
Voir les feuilles de styles associées :
£margin-top£
margin
margin-bottom

XHTML

L'attribut HTML VSPACE 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-top£
margin
margin-bottom

Attribut html ou xhtml WIDTH [s]

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

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

Définition

L'attribut HTML et XHTML WIDTH de la balise HTML et XHTML IMG, spécifie la longueur de l'image.
Exemple de code :
<IMG WIDTH="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 WIDTH associé à l'objet :
Exemple de code :
object.width

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