En combinant les feuilles de style en cascade et un langage de script, beaucoup
de choses sont possibles ! Il n'est pas nécessaire de se creuser les méninges pour trouver, déjà, des
applications particulières. Par exemple, l'utilisation de blocs graphiques peut être intéressante, comme
ci-dessous, pour obtenir des images interactives. Si le principe du "mapping"
paraît proche de celui-ci, il est toutefois plus statique car ne faisant appel qu'à une image. Dans le cas présent, rien n'empêche de combiner une interaction externe et/ou
interne ...
Rappel : seul Internet Explorer 5 et supérieurs de même que Mozilla, à partir de la version
0.9.4, affichent correctement cet ensemble de blocs ! Il s'agit des deux navigateurs de référence pour le
contrôle de la rubrique traitant des feuilles de style dont cet exposé est issu.
Avertissement : Pour être convaincante, cette démonstration nécessite la configuration de navigateur suivante (pour IE 5 et suivants) : résolution d'écran de 800x600 px, réglage de police d'affichage (taille de texte) sur "moyenne" et barre d'adresses désactivée. Si vous utilisez une configuration différente, vous pourrez modifier l'emplacement d'affichage : voir ci-dessous. On ne peut donc parler d'universalité dans cette méthode qui, si elle peut malgré tout être incorporée à une page destinée à la publication sur Internet, conviendrait davantage à un usage Intranet où tous les postes sont censés avoir les mêmes configurations ...
Voici le script utilisé pour faire appel aux fenêtres à dimensions variables (pop-up) :
Chacun des calques situés dans la partie gauche du bloc contiendra le lien voulu.
Soit vers un texte écrit à l'intérieur des balises contenant le lien, comme ceci :
<div id="nom_du_calque"><a href="#" class="nom_de_la_classe"
onmouseover="ouvre('votre texte ici ',417,203);">Survolez ici</a></div>
où le # sert de lien fictif et les notations chiffrées correspondent à la dimension de la
pop-up.
Soit en faisant appel à une page externe de la manière suivante :
<div id="nom_du_calque"><a href="image.htm" target=blocfen
class="nom_de_la_classe"
onclick="ouvre('la page contenant l\'image va arriver ...', 417,203);">Cliquez
ici</a></div>
où la page sera appelée par son nom (bien évidemment ...), en précisant ici qu'elle devra s'installer dans la
fenêtre droite grâce au target et où un texte peut être, malgré tout, inséré de la même
manière que dans le précédent. Son rôle : faire patienter le visiteur si la fenêtre appelée est lourde (en
octets ...). Si celle-ci est légère, l'affichage de ce message sera fugitif. Vous aurez remarqué le
\ indispensable lors de l'insertion d'un texte comportant une apostrophe dans un JavaScript
! Si vous l'omettez, il n'y aura pas d'affichage. Vous aurez observé que le lien Commentaire
2 faisait l'objet d'un appel de pop-up à la sortie du champ. Cet évènement est produit grâce à un
onmouseout inséré à la fin de la même balise.
C'est la commande fenetreBloc.moveTo(344,317) qui permet de régler la position de la pop-up. Elle est exprimée en pixels. Le premier chiffre correspond à la marge gauche et le second à la marge par rapport au haut de l'écran.
Quant à la temporisation que vous avez pu observer lors de l'affichage de l'image, elle sera obtenue en
insérant :
onLoad='compt=setTimeout("self.close();",7000)' à l'intérieur de la balise
<BODY> de la page qui la contient.
Tout cela est bien clair ? Oui ... ? Alors : à vos claviers !