Le remplacement d'image (RollOver) est surement un des usages les plus répandus du JavaScript côté client. Le script que je vous propose permet de changer automatiquement les images survolées sans ajout de code dans le corps du document HTML. Ce script a été testé et fonctionne avec MSIE 5.x/6.x, NN 6.x/7.x sous Windows et MacOS, et avec Opera 7.x sous Windows.
Pour chaque bouton nous devons avoir 2 images : une pour l'état par défaut et une autre pour l'état survolé. Ces deux images doivent porter le même nom (extension comprise) plus un identifiant que l'on ajoutera juste avant le point de l'extension pour l'image survolée.
Cet identifiant devra être le même pour chacune des images survolées de la page.
Tout d'abord, s’il s'agit de boutons, les images sont encadrées par des balises HTML 'A'.
Ensuite il faut définir les balises 'IMG' et leurs attributs. Et c'est là qu'apparaît notre deuxième contrainte. En effet, hormis l'attribut 'SRC', nous devons définir un attribut 'NAME' qui sera identique pour chaque bouton-image et un attribut 'ID' qui lui sera différent pour chaque bouton-image.
Comme on peut le constater, chaque bouton-image porte le même nom (btn) ce qui permettra à notre script de déterminer les images pour lesquelles notre bascule doit être active. Quant à l'identifiant, il est bien différent pour chacune de nos images, ainsi le script pourra les différencier.
Et les gestionnaires d'évènement dans la balise 'A' ?
On n'en a pas besoin ! C'est là que réside l'originalité de ces 'RollOver' et c'est ce que j'appelle un remplacement d'images sans code ajouté au HTML.
// Récupération de tous les ID des 'boutons-images' et // des adresses des fichiers images pour // les états over (survolés) et out (defaut).
tabID = new Array(); // Stockage des Identifiants
tabPictO = new Array(); // Stockage des Images Over (survolées)
tabPictD = new Array(); // Stockage des Images Defaut
for(i=0; i<document.getElementsByName(pnom).length; i++) {
tabID[i] = document.getElementsByName(pnom).item(i).id; var vlURL = document.getElementsByName(pnom).item(i).getAttribute("src");
tabPictD[i] = new Image();
tabPictD[i].src = vlURL;
// Extraction de l'extension du fichier (etat defaut) y compris le point var vlExt = vlURL.substring(vlURL.lastIndexOf('.'),vlURL.length);
// Extraction du prefixe du fichier (etat defaut) var vlPre = vlURL.substr(0,(vlURL.length - vlExt.length));
// Déduction et stockage du fichier de l'état Over
vlURL = vlPre + pmarqueur + vlExt;
tabPictO[i] = new Image();
tabPictO[i].src = vlURL;
}
// Détection du type de navigateur pour l'activation des évènements souris
flag = (window.Event)? true : false; // Vrai (window.Event) si Netscape ou Opera // Faux si IE (window.event pour IE)
// Capture des évènements et redirection pour action if(flag) {
document.captureEvents(Event.MOUSEOVER ¦ Event.MOUSEOUT);
}
La fonction 'fBascule()' accepte deux arguments :
- pnom qui correspond au nom de chaque bouton-image défini par l'attribut 'NAME' de la balise 'IMG' (dans notre exemple : btn). - pmarqueur qui correspond au marqueur inséré dans chacun des noms de fichier image survolé (dans notre exemple : _over).
C'est la méthode getElementsByName() du DOM1 qui nous permet de retrouver les images correspondant aux boutons et la méthode getAttribute() du même DOM1 qui récupère l'adresse de nos images.
La détection des évènements souris se fait par le biais de l'objet Event.
Ce script est limité aux navigateurs de génération 5 comme je l'ai indiqué en introduction mais il est perfectible.
Boutique |
Sites |
Bar |
Forum |
PhpBB |
Actu |
Glossaire |
Codes |
Tips |
Liens |
Livres |
Lettre
