 |
Publicité 
|
Pourtant, cela peut être pratique pour donner des précisions, proposer des éléments contextuels, etc.
Nous vous offrons ici la possibilité de placer des fausses fenêtres popup qui se placent par-dessus le contenu de la page courante. Pour quelles soient pratiques sans être gênantes, on peut les fermer, les réduire et les déplacer. Leur contenu est libre. Nous appelons « les flottants ».
Les flottants utilisent les éléments de :
- Feuille de style,
- Des fonctions JavaScript
- Du code html
I. FEUILLE DE STYLE
Les classes nécessaires sont les suivantes :
- .flottant : c’est le contenant de la boîte
- .flottant .titre : le bandeau de titre de la boite
- .flottant .titre .close : format des cases boutons
- .flottant div : destiné à la mise en forme du contenu de la boîte
II. JAVASCRIPT
A. Les variables
oFlottant : tableau des objets flottants
omoveFlottant : Flottant en cours de déplacement ou false
margeFlottant : position de référence de l'objet flottant en cours de déplacement (x,y)
fcloseFlottant : flag de demande de "fermeture" d'un flottant (en cours de sélection)
charcloseFlottant : caractères "restaurer / réduire" du bouton (-,_)
maxzFlottant : Zindex le plus élevé des flottants (celui de la classe flottant + 1
et
flot : liste des identifiants de flottants dans la page (id#1, id#2, id#3,…)
B. Les fonctions
initFlottant() : Fonction d'initialisation des flottants, appelée normalement par onload():
searchFlottant(flot) : fonction de recherche du flottant conteneur de l'objet en référence flot
searchFlottantById(flot) : fonction de recherche d'un flottant par son id dans la liste des flottants enregistrés
closeFlottant(o) : fonction de fermeture (invisible) d'un flottant
openFlottant(oid) : fonction d'ouverture d'un flottant
reduceFlottant(o) : Fonction de réduction/restauration d'un flottant
startmoveFlottant(o,e) : fonction d'initialisation du déplacement d'un flottant, e représente l’objet Event qui a provoqué l’appel
moveFlottant(e) : fonction de déplacement d'un flottant
C. Initialisation
Une seule chose à insérer :
window.onmousedown=moveFlottant;
III.LA PAGE HTML
La balise body commande l’initialisation :
<body onload="initFlottant();" onmousemove="moveFlottant(event);" onmouseup="omoveFlottant=false;">
Définition du premier « flottant » son id est déterminé par la variable flot et sa classe est « flottant »
<div id="flot1" class="flottant">
Le div de classe « titre » détermine le contenu et le comportement du flottant. Attention au span de classe « close » dont la fonction est la réduction. Son contenu doit correspondre à ce qui est décrit dans la variable charcloseFlottant
<div class="titre" onmousedown="startmoveFlottant(this,event);" onmouseup="omoveFlottant=false;">
<span class="close" onclick="closeFlottant(this)">X</span>
<span class="close" onclick="reduceFlottant(this)">-</span>
Internet</div>
Le div de classe « contenu » correspond à ce qui est affiché / caché en fonction de l’état restauré / réduit du flottant. Vous pouvez y mettre ce que vous voulez.
<div class="contenu">
...
</div>
<!--fin du flottant-->
</div>
On monte le second flottant, comme le premier … attention à l’identifiant.
<div id="flot2" class="flottant" style="left:320px;">
...
<!--fin du flottant-->
</div>
On monte le troisième flottant, comme le premier … attention à l’identifiant.
<div id="flot3" class="flottant" style="left:320px;">
...
<!--fin du flottant-->
</div>
Ainsi, la page de contenu proprement dit peut être écrite.
Nous avons choisi de commencer par des liens d’ouverture/réouverture des flottant
<p><a href="javascript:openFlottant('flot1');">Flottant 1</a> | <a href="javascript:openFlottant('flot2');">Flottant 2</a> | <a href="javascript:openFlottant('flot3');">Flottant 3</a></p>
Ensuite … le contenu
<h1><font size=3><tt>caxton technologies</tt></font><br />Conseil e-business et conseil en communication online </h1>
<h2>Intégrer les nouvelles technologies dans une stratégie de communication plurimedia </h2>
.
.
.
IV. MISE EN ŒUVRE
Une page html peut fonctionner de manière autonome avec autant de flottants que vous voulez. Attention, le navigateur peut ne pas apprécier d’en vraiment beaucoup. Une demi douzaine est une valeur maximale raisonnable nous semble-t-il.
Vous pouvez aussi constituer un fichier .js avec les variables globales et les fonctions pour ne conserver que la variable « flot » pour déterminer les identifiants des flottants de la page.
De même, une feuille style générique peut être facilement constituée.
Enfin un conseil, usez des flottants chaque fois que nécessaire, mais n’en abusez pas.
|
