Le changement d'image

Voyons maintenant comment nous pouvons changer une image par un simple passage de la souris.

<HEAD>
<TITLE>Exemple de changement d'image</TITLE>

<SCRIPT LANGUAGE="Javascript">
<!-- Changement d'une image à l'écran
function Change (flag,image) {
if (document.images) {
if (document.images[image].permloaded) {
if (flag==1) document.images[image].src = document.images[image].perm.src
else document.images[image].src = document.images[image].perm.oldsrc
}
}
}
function Prepare (image,adresse) {
if (document.images) {
image.onload = null;
image.perm = new Image ();
image.perm.oldsrc = image.src;
image.perm.src = adresse;
image.permloaded = true;
}
}
// -->
</SCRIPT>

</HEAD>
<BODY>

<A HREF="index.htm" onMouseover="Change(1,'image1');" onMouseout="Change(0,'image1');">
<IMG SRC="sonicd.gif" border=0 NAME="image1" onLoad="Prepare(this,'sonicg.gif');" >Exemple d'image changeante</A>

</BODY>
</HTML>

Exemple :

Page d'accueil de PM Conception

Définitions des balises de texte :

Balise Utilisation

<SCRIPT LANGUAGE="Javascript">
...
</SCRIPT>

 Cette fonction Javascript permet de définir les images à changer.
Pour obtenir cet effet de changement placer ce script dans votre code HTML, entre les balises <HEAD> et </HEAD>.

<A HREF="index.htm" onMouseover="Change(1,'image1');" onMouseout="Change(0,'image1');">
<IMG SRC="sonicd.gif" border=0 NAME="image1" onLoad="Prepare(this,'sonicg.gif');" >Exemple d'image changeante</A>

 Cette séquence de commandes exécute le script intégré dans l'en-tête de votre page.
  • HREF="index.htm" permet l'insertion d'un hyperlien externe.
  • onMouseover="Change(1,'image1') fait appel à la fonction Change intégré au Javascript. Cette fonction détecte le passage de la souris dans la zone programmée.
  • onMouseout="Change(0,'image1') fait appel à la fonction Change intégré au Javascript. Cette fonction détecte que la souris quitte la zone programmée.
  • SRC="sonicd.gif" définit l'image de base.
  • onLoad="Prepare(this,'sonicg.gif') fait appel à la fonction Prepare intégré au Javascript. Cette fonction change l'iamge.

©
Pédagogie Multimédia Conception