L'objet image - Cours Javascript

Introduction

Info

Dans ce cours de javascript nous allons étudier les propriétés de l'objet javascript image.

Vous trouverez d'autres informations pour compléter ce cours javascript dans :
- le chapitre objet Img du Document Object Model HTML
- la balise HTML XHTML IMG
- les feuilles de style CSS

Déterminer l'image

Info

Nous pouvons atteindre en javascript une image de deux façons.
Chaque image dans le document HTML ou XHTML à une référence.

- une référence numérique de 0 à X.
0 correspond à la première balise IMG trouvée dans votre page HTML, 1 la seconde balise IMG ...
Exemple de code :
document.images[Numbre]

- une référence par rapport l'attribut NAME ou ID de la balise HTML ou XHTML <IMG> :
Exemple de code :
<img src="image.gif" width="140" height="76" name="identifiant">
XHTML
<img src="image.gif" width="140" height="76" id="identifiant">
Exemple de code :
document.images.identifiant

Attention, la valeur de "identifiant" doit être unique.

images.length

Info

La propriété javascript document.images.length renvoie un tableau contenant tous les objets image de la page.
Pour parcourir l'ensemble des images :
Exemple de code :
for(var i = 0; i < document.images.length; i++){
  alert(document.images[i].src)
}


Les nouveaux navigateurs permettent de récupérer l'ensemble des images :
Exemple de code :
var mesimages = document.getElementsByTagName("img");
for(var i = 0; i < mesimages.length; i++){
  alert(mesimages[i].href)
}

images.src

Info

La propriété javascript document.images["identifiant"].src renvoie l'url de l'image.
Cette url peut être absolue ("http://aliasdmc.fr/image/images.gif") ou relative ("image/images.gif") suivant le navigateur.
Exemple de code :
<img src="image.gif" width="140" height="76" name="identifiant">

Exemple de code :
alert(document.images.identifiant.src);
//image.gif

La propriété javascript document.images["identifiant"].src accepte comme valeur :
- url relative ou absolue d'un image.
Exemple de code :
document.images["identifiant"].src = "nouvelle URL";

images.height

Info

La propriété javascript document.images["identifiant"].height permet de connaître la hauteur de l'image.
Exemple de code :
<img src="image.gif" width="140" height="76" name="identifiant">

Exemple de code :
alert(document.images.identifiant.height);
//76

La propriété document.images["identifiant"].height javascript renvoie une valeur de type Number dont l'unité est le pixel.

La propriété javascript document.images["identifiant"].height accepte comme valeur :
- un nombre entier dont l'unité est le pixel.
Exemple de code :
document.images.identifiant.height=150;

Si vous ne spécifiez pas une longueur alors la longueur de l'image est automatiquement agrandie dans la même proprotion que la hauteur.

Attention, la hauteur ne peut être changée (sauf dans les navigateurs récents, Firefox, Internet explorer >5.5).

Ne prend pas le dessus, si l'image a une bordure spécifiée en css. Vous devrez utiliser :
document.images["identifiant"].style.height ou un de ses dérivés (voir la feuille de style height)

images.width

Info

La propriété javascript document.images["identifiant"].width permet de connaître la longueur de l'image.
Exemple de code :
<img src="image.gif" width="140" height="76" name="identifiant">

Exemple de code :
alert(document.images.identifiant.width);
//140

La propriété javascript document.images["identifiant"].width renvoie une valeur de type Number dont l'unité est le pixel.

La propriété javascript document.images["identifiant"].width accepte comme valeur :
- un nombre entier dont l'unité est le pixel.
Exemple de code :
document.images.identifiant.width =150;

Si vous ne spécifiez pas une hauteur alors la hauteur de l'image est automatiquement agrandie dans la même proprotion que la longueur.

Attention, la longueur ne peut être changée (sauf dans les navigateurs récents, Firefox, Internet explorer >5.5).

Ne prend pas le dessus, si l'image a une bordure spécifiée en css. Vous devrez utiliser :
document.images["identifiant"].style.width ou un de ses dérivés (voir la feuille de style width)

images.border

Info

La propriété javascript document.images["identifiant"].border permet de connaître la valeur de l'attribut border d'une image.
Exemple de code :
<img src="image.gif" width="140" border="0" height="76" name="identifiant">

Exemple de code :
alert(document.images.identifiant.border);
//0

La propriété javascript document.images["identifiant"].border renvoie comme valeur :
- un nombre entier ou chaîne vide si l'attribut n'est pas spécifié.

La propriété javascript document.images["identifiant"].border accepte comme valeur :
- un nombre entier.
Exemple de code :
document.images["identifiant"].border=5;

Ne prend pas le dessus, si l'image a une bordure spécifiée en css. Vous devrez utiliser :
document.images["identifiant"].style.border ou un de ses dérivés (voir la feuille de style border)

images.alt

Info

La propriété javascript document.images["identifiant"].alt permet de connaître la valeur de l'attribut ALT.

La propriété javascript document.images["identifiant"].alt renvoie comme valeur :
- un chaîne de caratère (String)
Exemple de code :
<img src="image.gif" width="140" alt="coucou" height="76" name="identifiant">

Exemple de code :
alert(document.images.identifiant.alt);
//coucou

La propriété javascript document.images["identifiant"].alt accepte comme valeur :
- un chaîne de caratère (String).
Exemple de code :
document.images["identifiant"].alt="blabal";

Attention, l'attribut alt ne peut être changée (sauf dans les navigateurs récents, Firefox, Internet explorer >5.5).

Déclaration

Info

Pour changer une image, il faut d'abord la déclarer.

On la déclare :
Exemple de code :
var Nom = new Image();

Il faut ensuite lui donner son emplacement.
On le note :
Exemple de code :
var Nom.src = "url";

On obtient donc :
Exemple de code :
var Nom = new Image();
var Nom.src = "url";

Les rollovers

Exercice

Dans cet exercie javascript nous allons créer un rollover.
Les deux images a intervertir au passage de la souris.

Exemple de code :
<img src="exemple/images/bouton.gif" width="75" height="24" border="0">

Exemple de code :
<img src="exemple/images/boutonb.gif" width="75" height="24" border="0">

Le changement s'effectuera au passage de la souris soit "onMouseOver" et "onMouseOut" pour rétablir l'image.

- La première étape consiste a mettre dans le corps du document HTML, la première image et de lui rajouter un nom grâce à l'attribut name.

Ce qui donne par exemple :
Exemple de code :
<img src="exemple/images/bouton.gif" width="75" height="24" border="0" name="bt">

- En suite nous allons créer deux fonctions, une pour "onMouseOver" et une autre pour "onMouseOut". Nous n'oublierons pas de déclarer nos images.
Exemple de code :
var bt1=new Image();
bt1.src="exemple/images/bouton.gif";
var bt2=new Image();
bt2.src="exemple/images/boutonb.gif";

function montre(){
  document.images.bt.src=bt2.src;
}

function cache(){
  document.images.bt.src=bt1.src;
}

- Il ne nous reste plus qu'a associer ces fonctions à la balise Img.
Pour cela, nous allons créer un lien sur l'image (balise <A>) dans laquelle nous allons mettre nos actions.
Exemple de code :
<a href="#" onMouseOut="cache()" onMouseOver="montre()">
<img src="exemple/images/bouton.gif" width="75" height="24" border="0" name="bt">
</a>

Vous devez voir cela :


Vous trouverez une autre façon dans le glossaire à la balise HTML <IMG> (Tout en bas).

Les événements

Info

Voici les événements possibles pour le changement d'image :

onMouseOver la souris survole l'image.
onMouseOut la souris quitte l'image.
onClick on clique sur l'image.
onDbleClick on double clique sur l'image.
onMouseUp le bouton gauche est relâché.
onMouseDown le bouton gauche est appuyé.
onMouseMove la souris bouge.