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.
Exemple :
<a href="www.asp-php.net/forum.php">
<img src="forum.jpg" name="btn" id="forum" />
</a>
<a href="www.asp-php.net/tutorial/asp-php/glossaire.php">
<img src="glossaire.gif" name="btn" id="glossaire" />
</a>
etc...
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.
<script language="javascript" type="text/javascript">
function fBascule(pnom,pmarqueur) {
// 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);
}
document.onmouseover = fDocHandlerOver;
document.onmouseout = fDocHandlerOut;
}
// Bascule des 'boutons-images'
function fDocHandlerOver(e) {
var vlElement = (flag)? e.target.id : window.event.srcElement.id;
for (i=0;i<tabID.length;i++) {
if (vlElement == tabID[i]) {
window.document.images[vlElement].src = tabPictO[i].src;
break;
}
}
}
// Restauration des 'Boutons-images'
function fDocHandlerOut(e) {
var vlElement = (flag)? e.target.id : window.event.srcElement.id;
for (i=0;i<tabID.length;i++) {
if (vlElement == tabID[i]) {
window.document.images[vlElement].src = tabPictD[i].src;
break;
}
}
}
</script>
...
<body onLoad="fBascule('btn','_over')">
...
</body>
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.
Bon amusement.
Forum |
Actu |
Glossaire |
Codes |
Tips |
Liens |
Livres |
Annuaire
