Le "rollover" multiple sans appel à un langage de script

Certaines pages de sites comportent parfois des diapositives, des vignettes de petite dimension, voire des listes d'images ou photos. Celles-ci constituent bien souvent des liens destinés à une redirection vers une autre page affichant un agrandissement éventuellement accompagné d'une légende. Dans d'autres cas, ces liens font appel à des fenêtres dites "popup" venant se superposer à la page en cours. Il peut toutefois survenir un obstacle à un affichage correct : un paramétrage de sécurité poussé du navigateur de votre visiteur ! Dans le premier cas, il peut avoir désactivé l'interpréteur de script ; dans le second, il peut avoir paramétré son navigateur pour ne pas afficher les fenêtres de type "popup". En effet, ces dernières sont le plus souvent irritantes, affichant des publicités indésirables ou des messages non sollicités. Il faut donc adopter une parade.

Promenez le curseur de votre souris sur les quelques liens figurant sur la droite de cette page. Dans le cas présent, j'ai adopté une superposition de l'image sur le texte existant et une superposition de la légende sur l'image. Rien ne vous empêche, évidemment, de modifier ces paramètres : il vous suffira d'en modifier les règles en fonction de vos besoins.

Les éléments "intra-lignes" dont les balises les plus courantes p et h ne pouvant être utilisées à l'intérieur de balises de liens, le sélecteur span pourrait paraître le plus indiqué. Le W3C n'apprécie toutefois pas l'imbrication de ces sélecteurs et, comme il s'agit ici de légendes à afficher sous forme de "bulles", j'ai donc opté pour l'attribut de mise en forme italique <em> qui ne pose ici aucun problème. Il suffit dès lors de l'utiliser dans les pseudo classes bulle qui peuvent faire l'objet d'autant de règles de style (police et sa couleur, couleur de fond, taille, etc.) que nécessaire.

Précision intéressante : le nombre d'évènements affichables (les bulles) simultanément n'a aucune limite !

Vous trouverez la feuille de style qui règle les évènements de cette page en activant le lien FdS = CSS : vous pourrez la modifier, la compléter ou l'enjoliver selon vos souhaits. Vous pouvez envisager une seule ou diverses présentations des bulles (comme dans cet exposé) : il n'y aura de limites qu'à votre imagination ...

Il ne reste qu'un "petit" problème pour obtenir une optimisation des pages à télécharger sur la grande toile : la vitesse de connexion. Vous aurez compris que les images étaient téléchargées en même temps que cette page et de sa feuille de style : pour qui ne dispose pas d'une connexion à grande vitesse, cela peut être particulièrement inadapté ... Il existe toutefois des astuces pour pallier à cet inconvénient : vous les trouverez en parcourant les autres pages de ce site. A vous de fouiller ...

Si votre page comporte du texte en suffisance, ce petit problème passera toutefois inaperçu. En effet, le texte s'affichera presque instantanément lorsque le visiteur arrivera sur celle-ci. Comme il commencera par le lire (du moins, logiquement ...), les images se chargeront en arrière-plan. Lorsqu'il voudra les activer, elles seront probablement déjà installées dans le dossier temporaire de son disque dur et seront donc affichées instantanément. Sachant qu'en RTC (vitesse moyenne de 2 à 4 Kb/s) il faut moins de 2 minutes pour télécharger une douzaine d'images de grand format (640 x 400 pixels, par exemple) correctement compressées, faites l'expérience : lisez votre texte, chronométrez le temps qu'il "occupe" et agissez en conséquence ...

Dernière petite précision : cette page a été écrite pour un affichage optimal dans une fenêtre ou sous une résolution de 780 pixels de largeur. Cette méthode, décriée par les puristes, s'avère nécessaire dans ce cas. En effet, si des pages essentiellement constituées de textes peuvent s'adapter facilement, il n'en est pas de même lorsqu'il s'agit de blocs dont les dimensions sont absolues. C'est le cas avec des photos ou des graphiques dès qu'ils dépassent une certaine taille.