Ce qui est actuellement (et sans doute pour toujours) impossible à obtenir de façon parfaite avec les
"pop-up" ou les tableaux (l'alignement précis) est parfaitement réalisable ! ..... à condition de s'allier
les services de JavaScript.
Tant pis pour les intégristes et paranoïaques de la sécurité (heureusement rares !) qui désactivent les
langages de script lorsqu'ils surfent sur les vagues d'Internet : ils ratent l'occasion d'afficher des pages
dynamiques grâce à des moyens simples et très légers à mettre en place. Sans faire appel à des artifices
sophistiqués et particulièrement gourmands en temps de téléchargement (je pense ici, notamment, aux "applets"
et autres animations "Flash"), il est désormais possible d'animer des pages de façon satisfaisante en s'en
tenant aux 3 langages de base que tout bon concepteur de site devrait apprendre : Html, Css et JavaScript. Il
feront alors du DHTML, le HTML dynamique !
Voici une de ces applications qui intéressera, sans doute, bon nombre de concepteurs :
Cet ensemble est identique à celui utilisé dans l'exposé à propos des calques
et de l'introduction aux pages dynamiques : vous pourrez y trouver les règles.
Les blocs situés à gauche contiennent, ici aussi, une série de liens.
Lorsque vous les activerez, ils se superposeront exactement au bloc dans lequel vous
lisez ce texte. Celui-ci l'est d'ailleurs déjà ...
Attention : contrairement à l'utilisation des "pop-up" vues dans un exposé précédent,
elles ne s'élimineront pas mutuellement lors de l'activation du lien mais se superposeront !
Rappelez-vous qu'il s'agit de calques et non de fenêtres indépendantes : celles du "dessous" ne viendront pas
se replacer au-dessus des autres car elles prennent l'ordre dans lequel elles sont écrites (en code source,
évidemment). #1
Il faut donc les "effacer", en quelque sorte, à partir des liens situés à gauche. Les fichiers musicaux
s'annihileront toutefois mutuellement lors du chargement !
Mauvaise surprise pour ceux qui n'utilisent pas le navigateur Internet Explorer, à partir
de la version 5 ... ! Tous les calques destinés à être affichés à droite se sont empilés (dans l'ordre
d'écriture !) comme un tas de crèpes ! Et il faut les effacer successivement pour pouvoir découvrir leur
contenu ... Micro$oft, quant à lui, obéit rigoureusement aux commandes du JavaScript utilisé pour ces
évènements. Bogue ou pas bogue ?
Il faut bien savoir qu'un calque est, par définition, superposable à un autre document ... Mozilla est donc
dans le vrai et il s'agit d'une anomalie de IE : voyez en fin de cet exposé pour éviter cet inconvénient.
#2
Contrairement aux "pop-up", le document ou l'objet appelé reste visible lorsque l'ascenseur est activé et ne
comporte pas de barre de titre, ce qui est plus esthétique. Il peut comporter des éléments internes ou
externes de même que des liens vers des objets externes.
Cela permet d'envisager de nombreux domaines d'application !
Restent quelques petits inconvénients pour obtenir un résultat idéal :
Il faut fermer chacun des calques après l'avoir vu, sans quoi il restera "sous" la pile des calques
affichés ultérieurement #1
Il est actuellement impossible d'utiliser d'autres évènements issus de JavaScript telle une temporisation
pour fermeture automatique ou un lien vers une page externe pour l'intégrer au calque actif.
Le dimensionnement de WMP est impossible : le calque affiche imperturbablement les commandes inférieures
du lecteur, même si l'on n'en écrit pas les attributs !
Pour le reste, le résultat est intéressant car il permet ce qui, jusqu'à présent, était parfaitement
impossible, même avec des cellules dans une table. Il ne manque que la souplesse de l'ordre d'affichage pour
être parfait.
fermer la fenêtre
Pour Mozilla, le "plug-in" de lecture son doit être chargé
fermer la fenêtre
Pour Mozilla, le "plug-in" de lecture son doit être chargé
fermer la fenêtre
Pour Mozilla, le "plug-in" de lecture son doit etre chargé
Vous constatez que vous pouvez les dimensionner ... et par conséquent les positionner où vous voulez !
Ici, à gauche de la fenêtre choisie dès le départ pour l'affichage des blocs.
Rien ne vous empêche de les afficher tous les deux ...
Ceci est un second affichage par lien externe au bloc.
Encore une fois, vous pouvez faire afficher la fenêtre appelée où bon vous semble.
J'ai volontairement sous-dimensionné ces 2 blocs en largeur : cela vous permet de constater que le calque de
base reste présent.
Enfin, dernière démonstration : ici, le calque
sous-dimensionné s'installe au centre de la fenêtre, ce qui permet d'entrevoir la possibilité de construction
complexe de calques superposés ... Astuce intéressante : vous constatez que ce calque est trop petit pour
afficher la totalité du texte. J'y ai tout simplement ajouté la règle overflow : auto afin
d'appeler une barre de défilement. Dans le cas contraire, le texte aurait été tronqué ... Petit inconvénient
: l'esthétique du bloc en prend un coup : ce n'est pas joli-joli ...
Et si vous le désirez, rien ne vous empêche
d'installer des liens extérieurs :
Voyons maintenant comment obtenir ce résultat. Tout d'abord, installez le script suivant dans le
<HEAD> (balises d'en-tête) de la page :
<script type="text/javascript"><!--
function affiche(id) {
if (document.getElementById) {
document.getElementById(id).style.visibility="visible";
} else if (document.all) {
document.all[id].style.visibility="visible";
} else if (document.layers) {
document.layers[id].visibility="visible";
} }
function efface(id) {
if (document.getElementById) {
document.getElementById(id).style.visibility="hidden";
} else if (document.all) {
document.all[id].style.visibility="hidden";
} else if (document.layers) {
document.layers[id].visibility="hidden";
} }
//--></script>
Ce script est censé permettre d'afficher ou "éteindre" des blocs de données ou d'éléments par (presque)
tous les navigateurs, ce qui explique les 3 conditions possibles reprises dans les fonctions. Celles-ci sont
simples : au nombre de deux, elles affichent (variable visible) ou effacent (variable
hidden), selon le lien activé.
Ce dernier sera écrit comme suit :
Ces différents liens pointent vers les calques que vous aurez installé (écrit) à
l'intérieur du calque principal (identifié ici sous le nom mensemble : voir exposé
précédent) en réglant leur styles par la (les) lignes suivantes :
Attention : Le calque principal est déclaré en position:relative afin d'installer le bloc dans le flux de l'écriture normale de la page. Les
différents calques intégrés dans la partie gauche (ceux comportant les liens) sont déclarés de la même façon.
Rien ne vous empêche, évidemment, de les régler en position:absolute : les cotes
destinées à les imbriquer sont dès lors à écrire très précisément. Quant aux différents blocs de données et
d'éléments qui seront appelés par les liens et affichés à droite, ils seront réglés en position:absolutenon par rapport aux bords de la page mais
par rapport aux bords du calque parent. La règle reprise ci-dessus correspond au calque affiché à l'ouverture
de cette page.
#1 Si l'utilisation d'un lien traditionnel pour afficher les blocs pose problème, il
est toutefois possible de pallier à cet inconvénient. Il suffit pour cela d'utiliser une double commande que
vous connaissez bien maintenant (si vous avez suivi l'ensemble de la rubrique ...) : l'évènement au survol du
curseur de la souris sur un lien. Il faudra alors modifier quelque peu la ligne faisant appel au bloc à
afficher et l'écrire de la manière suivante :
... en ajoutant éventuellement un nom de classe pour modifier la couleur du lien au survol du
curseur.
Essayez donc en utilisant ce faux lien : Survolez ici !mais ne cliquez pas !
Naturellement, pour cette démonstration, j'ai inversé l'ordre d'affichage/effacement du bloc.
#2 Si Internet Explorer n'affiche pas automatiquement (en les empilant) les différents
calques prévus dans la fenêtre, il s'agit d'un bogue. En effet, logiquement, ils devraient être tous
affichés, empilés les uns sur les autres ! C'est d'ailleurs la réaction de Mozilla. Il faut donc qu'ils
soient invisibles lors du chargement de la page.Pour obtenir ce résultat, il existe deux possibilités : soit
utiliser le JavaScript et faire un ajout dans la balise <BODY> comme ceci :