Apparition d'image

Petite balade romantique: promenez votre souris sur les remparts...

• L'absence de href="#" onclick="return(false)" permet de ne pas avoir le curseur en forme de main avec IE, mais désactive le AREA (et le ONMOUSEOVER) avec Netscape. On peut bien sûr mettre des vrais liens.
• Le return(true) n'est pas nécessaire dans le ONMOUSEOVER et ONMOUSEOUT pour que l'image s'affiche effectivement. Par contre, il l'est pour par exemple modifier la ligne d'état. Réciproquement, le return(false) est nécessaire dans un ONCLICK si le lien est bidon (ici: #).
• Avec cette méhode, point n'est besoin de précharger les imagettes dans le cache (avec un gestionnaire ONLOAD dans BODY), car elles sont chargées effectivement (elles sont invisibles).
• Attention à ce que les imagettes et les zones AREA ne se recouvrent pas. En effet, l'imagette est par-dessus le document (grâce à un DIV), donc désensibilise une zone d'AREA qui se trouverait en-dessous.
• Le style.visibility n'est pas reconnu par les vieux navigateurs. Avec Netscape, c'est directement un attribut de l'objet, ou du tableau layers[]. On a ajouté la fonction StyleCalque() pour que ça marche avec Netscape (mais ça nous ralentit l'exécution). Mais là où ça se complique, c'est qu'on adresse le DIV avec layers, et que les DIV sont imbriqués (d'où layers[0].layers[id]).
• De plus, avec Netscape (4.5), les COORDS des AREA sont buggées, et la zone sensible se déplace d'autant que la grande image est loin dans la page. Typiquement, l'affichage de l'imagette se déclenche lorsque la souris passe bien plus bas (pourtant l'imagette s'affiche au bon endroit, et le cadre de la zone sensible (qu'on peut voir en appuyant sur la touche Tab) est au bon endroit. Cela est vrai même si on inclut les AREA dans le DIV englobant.
• La méthode la plus sûre (c'est-à-dire la plus compatible entre les navigateurs) pour faire apparaître des images est d'utiliser des images différentes (ex: château sans l'imagette, et château avec imagette), donc ici 5 grandes images différentes. Par souci de rapidité (en effet, on ne chargerait plus seulement l'imagette, mais toute l'image à chaque fois, on découpe l'image en tranches (qu'on juxtapose dans un tableau), ce que fait certains logiciels comme ImageReady (livré avec Photoshop). Ainsi, seule la tranche avec ou sans l'imagette se charge.
• Bref, c'est énervant qu'il n'y ait pas de norme entre les navigateurs (IE est pourtant bien positionné pour qu'on adopte sa norme), et ça limite l'utilisation et la facilité de Javascript...
• Vous pouvez retrouver cet exemple, optimisé pour Internet Explorer (les imagettes n'apparaissent pas sous Netscape, et, sous IE, elles apparaissent plus vite qu'ici) à cette adresse.