Cours Javascript : L'objet image
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
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 ...
- une référence par rapport l'attribut NAME ou ID de la balise HTML ou XHTML <IMG> :
XHTML
<img src="image.gif" width="140" height="76" id="identifiant">
Attention, la valeur de "identifiant" doit être unique.
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.identifiantAttention, 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 :
alert(document.images[i].src)
}
Les nouveaux navigateurs permettent de récupérer l'ensemble des images :
for(var i = 0; i < mesimages.length; i++){
alert(mesimages[i].href)
}
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.
//image.gif
La propriété javascript document.images["identifiant"].src accepte comme valeur :
- url relative ou absolue d'un 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.
//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.
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)
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.
//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.
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)
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.
//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.
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)
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)
//coucou
La propriété javascript document.images["identifiant"].alt accepte comme valeur :
- un chaîne de caratère (String).
Attention, l'attribut alt ne peut être changée (sauf dans les navigateurs récents, Firefox, Internet explorer >5.5).
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 :
Il faut ensuite lui donner son emplacement.
On le note :
On obtient donc :
var Nom.src = "url";
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.
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 :
- 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.
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.
<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 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.
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.