Traitements des images en JS

Retour au menu

Rappels HTML

L'objet Image

Il fait partie des objets (ou plutôt des classes d'objets) prédéfinies du langage (à partir de la version 1.2). Contrairement à l'usage de la balise IMG, on peut précharger l'image et la stocker en cache (mémoire+disque) dans un objet de type Image, avant de l'afficher.

Contructeur Image()

Il s'agit d'une fonction spéciale sans paramètre qui sert à créer un objet.
var monImage = new Image()

Propriétés

Méthodes

Exemples de manipulations d'images

Evénements onMouse

Soit une hyper-image nommée img (une image qui sert d'ancre à un lien interne ou externe).
Lorsque l'utilisateur promène sa souris sur une telle image, il provoque un événement onMouseOver qui doit changer la source de l'image.
Lorsqu'il la quitte, l'événement onMouseOut est provoqué et l'image permanente sera de nouveau affichée

Indication : affecter directement les gestionnaires d'événements par l'instruction img.src='fichier-image'.

Solution proposée 

<BODY>
<A HREF="javascript:void(0)" 
 onMouseOver="img.src='../images/connect.gif' " 
 onMouseOut="img.src='../images/creteil.gif' ">
  <IMG NAME="img" WIDTH=60 HEIGHT=61 BORDER=0 
  SRC="../images/creteil.gif"></A>
 ..........
</BODY>

Version améliorée

Voici une solution plus générale et satisfaisante, qui consiste à charger d'abord les images dans un tableau d'images, dès l'affichage du document.

<SCRIPT>
var commentaire=new Array(2);
var images=new Array(2);

function init() {
 commentaire[0]="Et voici mon chat jeune .." 
 commentaire[1]="C'est moi en pleine action .." 
for (var i=0 ; i <images.length; i++) 
 images[i]= new Image();
 images[0].src="../../images/monchat.gif"
 images[1].src="../../images/etmoi.jpg"
}
function changimage(n) {
document.image.src=images[n].src;
status=commentaire[n];
}
</SCRIPT>

<BODY onLoad="init()"> 
<H2>Evénements onMouseover et onMouseout sur un lien-image</H2>

<A HREF="javascript:void(0)"
 // return true est obligatoire, pourquoi ?
 onMouseOver="changimage(1); return true"; 
 onMouseOut="changimage(0)">
<IMG NAME="image" width=640 height=480 SRC="../../images/monchat.gif">
</A>

Cliquer pour changer d'image

Solution proposée 

<script langage="JavaScript1.2">
var tab_image = new Array(5);
for (var i=0; i< tab_image.length;i++)
	tab_image[i]= new Image();
tab_image[0].src='../images/dalhias.jpg';
tab_image[1].src='../images/eglantines.jpg';
tab_image[2].src='../images/roses rouges.jpg';
tab_image[3].src='../images/roses jaunes.jpg';
tab_image[4].src='../images/chrysanthemes.jpg';

var n=0;

function change() {
n= ++n;
if (n == tab_image.length) n=0;
window.document.image.src=tab_image[n].src;
}
</script>
</HEAD>

<BODY>
<H4>Evénements onClick sur un lien-image</H4>
<A HREF="JavaScript:change()"> 
<IMG NAME="image" WIDTH=200 HEIGHT=150 SRC="../images/fleurs1.jpg">
Cliquer pour changer d'image
</A>

Evénements onClick sur un lien-image

Cliquer pour changer d'image

Défilement contrôlé d'images

Description

Ici le changement d'image n'est pas lié au déclenchement d'un événement provoqué par l'utilisateur (onMouseOver ci-dessus), mais est automatiquement démarré au chargement de l'image initiale par la balise IMG, grâce à l'événement onLoad qui appelle la fonction anime().
Celle-ci se charge de changer la valeur de la propriété src donc de provoquer aussitôt l'affichage d'une autre image.
Plus précisément :

Exemple de code

<HEAD>
<SCRIPT LANGUAGE="JavaScript">
d = 100 ;
n = 0 ;
var im = new Array(10) ;

function init(){
 for (var i=0; i<im.length;i++){ 
  im[i] = new Image();
  im[i].src= "../images/"+i+".gif" ; 
  }
}
function anime() {
 document.monImage.src= im[n].src ;
 n++;
 if (n == im.length) n=0;
}
</SCRIPT>
</HEAD>

<BODY onLoad="init()">

<IMG SRC="i0.gif" NAME="monImage" 
	BORDER=0 WIDTH=58 HEIGHT=76 
	onLoad="setTimeout('anime()',d)">
</BODY>

Exemple de réalisation