Robloche, que vous pouvez retrouver sur les forums, nous propose ce tutorial sur les objets Popup de microsoft.
Merci à lui :)
Voici un popup qui tient sur une seule ligne, mais c'est bien parce que je l'ai voulu...
Ce popup, par contre, tient sur plusieurs lignes et a une largeur fixe. La longueur est ajustée en fonction du contenu du tableau.
Un peu de texte.
Encore du texte.
Tutorial sur les objets Popup
Sur une page HTML, on a parfois besoin d'afficher des informations lorsque
l'utilisateur passe le curseur de la souris sur un objet, un peu à la
manière des info-bulles désormais classiques en informatique.
Nous avons alors le choix entre deux procédés : l'utilisation
de calques ou l'ouverture d'une nouvelle fenêtre (popup classique). Mais
il existe pourtant une troisième alternative : les objets Popup.
Ceux-ci sont disponibles dans Internet Explorer 5.5 et versions suivantes. Cependant,
on ne trouve que peu d'informations à ce sujet sur Internet, à
part dans la documentation de Microsoft,
alors que ces objets peuvent se révéler particulièrement
pratiques, si bien sûr, on accepte que son site ne soit visible que sous
IE. Les trois avantages immédiats de ces objest, par rapport aux popups
classiques (ouverture d'une nouvelle fenêtre) sont :
pas de nouvelle fenêtre à l'écran ;
pas de perte du focus pour l'utilisateur ;
pas de multiplication des popups et fin de la fastidieuse opération de fermeture qui va avec.
Nous allons donc voir ici quelques exemples d'utilisation et de manipulation
de ces objets Popup afin de bien débuter.
Cliquez pour voir le code qui permet d'obtenir ceci :
<a href="#" onMouseOver="showFirstPopup()">passez
la souris ici</a>
<script language="JavaScript">
function showFirstPopup() {
// Test pour vérifier que le navigateur connaît les
objets Popup
if(!window.createPopup) {
alert("Votre navigateur ne connaît pas les
objets Popup...");
return false;
}
// Création de l'objet
var oPopup = window.createPopup();
var oPopBody = oPopup.document.body;
// Mise en forme
oPopBody.style.backgroundColor = "#9FC1FF";
oPopBody.style.border = "solid darkblue 1px";
oPopBody.style.margin = "0px";
oPopBody.style.color = "white";
oPopBody.fontSize = "12px";
oPopBody.style.textAlign = "center";
oPopBody.innerHTML = "Cliquez en dehors pour fermer.";
oPopup.show(event.x+10, event.y+10, 190, 25, document.body);
// Affichage du popup
oPopup.show(event.x+10, event.y+10, 190, 25, document.body);
}
</script>
Comme nous le voyons dans le code précédent, c'est la fonction
createPopup() qui sert à créer l'objet
Popup proprement dit. Cette fonction ne prend pas de paramètre. Ensuite,
on paramètre son style avec les attributs classiques. Et enfin, on l'affiche
grâce à la fonction show(). Cette fonction
prend en paramètre la position du coin haut gauche du popup (ici, nous
utilisons les attributs event.x et event.y
pour connaître la position du curseur de la souris), ses dimensions (largeur
et hauteur) et l'objet par rapport auquel il faut le placer (ici, nous le positionnons
par rapport au corps de notre document principal grâce à document.body).
2. Remarque
Il est important de noter qu'on ne peut avoir qu'un seul objet popup à
la fois. C'est pourquoi, il est pratique de déclarer un tel objet au
début de la page et de réutiliser cet objet chaque fois que c'est
nécessaire. Voici un exemple : passez
la souris sur le début et
sur la fin de cette phrase. Comme vous le constatez, l'apparition d'un second
popup fait disparaître le premier.
Cliquez pour voir le code qui a produit cet exemple :
<a href="#" onMouseOver="showPopup('début')">passez
la souris sur le début </a> <a href="#" onMouseOver="showPopup('fin')">et
sur la fin de cette phrase</a>
<script language="JavaScript">
if(window.createPopup) {
var oPopup = window.createPopup();
var oPopBody = oPopup.document.body;
}
function showPopup(text) {
if(!oPopup) {
alert("Votre navigateur ne connaît pas les
objets Popup...");
return false;
}
On peut aussi préférer que le popup s'efface dès que le
curseur de la souris quitte la zone "sensible", comme le montre cet
exemple : passez la souris ici.
Cliquez pour voir la fonction à ajouter :
<script language="JavaScript">
function hidePopup() {
if(!oPopup) return false;
oPopup.hide();
}
</script>
Cliquez pour voir la modification à apporter au lien :
<a href="#" onMouseOver="showFirstPopup()"
onMouseOut="hidePopup()">passez la souris ici</a>
Ici, c'est la fonction hide() qui va masquer le popup courant.
4. Et avec une image ?
On peut évidemment faire la même chose avec des images :
Cliquez pour voir le code correspondant (les fonctions utilisées étant les
mêmes que précédemment) :
Voilà, nous avons à peu près fait le tour des utilisations
classiques de ces objets, mais une chose nous fait encore cruellement déaut.
En effet, comme nous l'avons vu, lors de l'affichage du popup, il faut préciser
sa taille. Or, celle-ci nous est bien souvent inconnue quand le contenu du popup
est variable... Mais voici une petite astuce pour y remédier.
Il suffit de "préparer" tous ses popups à l'avance
en les affichant dans des tableaux hors écran. Ainsi,
lors de leur affichage, il suffit de récupérer la taille des tableaux
(qui, eux, s'adaptent correctement à leur contenu) et d'utiliser celle-ci
pour le popup. Voici un exemple d'une telle utilisation :
// Fonction qui affiche le popup
// Elle prend en paramètre, l'id du tableau à afficher dans le
popup
function showTabPopup(idToShow) {
if(!oPopup) {
alert("Votre navigateur ne connaît pas les
objets Popup...");
return false;
}
// Quelques exemples de ce que l'on peut faire comme mise en forme,
// mais on peut faire bien plus...
oPopBody.style.backgroundColor = "#9FC1FF";
oPopBody.style.border = "solid darkblue 2px";
oPopBody.style.margin = "5px";
oPopBody.style.color = "white";
oPopBody.fontSize = "12pt";
oPopBody.innerHTML = '<font color="#443366"><b>Info
popup :</b></font> '+idToShow.outerHTML;
// Largeur et hauteur du popup
// idToShow.offsetWidth et .offsetHeight donnent la largeur et la
hauteur du tableau dont l'id est idToShow
// (faire quelques essais pour trouver les bonnes valeurs)
var pWidth = idToShow.offsetWidth+15;
var pHeight = idToShow.offsetHeight+35;
// Position d'affichage du popup
// Plein de solutions possibles : on peut par exemple le placer
// par rapport à l'objet qui a déclenché l'évènement.
// Là, il est placé par rapport au pointeur de la
souris.
var posX = event.x+10;
var posY = event.y+10;
Sans oublier les fameux tableaux qui contiennent les textes à afficher
(à ce propos, on peut mettre à peu près n'importe quoi
dans un popup). Cliquez pour voir le code des tableaux et le style associé :
<table class="popupStyle" id="pop1"
cellpadding="0" cellspacing="0" border="0">
<tr><td nowrap>Voici un popup qui tient sur une seule
ligne, mais c'est bien parce que je l'ai voulu...</td></tr>
</table>
Notez le nowrap qui force l'affichage de tout le texte sur une seule ligne du tableau.
<table class="popupStyle" id="pop2"
cellpadding="0" cellspacing="0" border="0" width="250">
<tr><td style="text-align: justify;">Ce popup,
par contre, tient sur plusieurs lignes et a une largeur fixe. La longueur est
ajustée en fonction du contenu du tableau.</td></tr>
</table>
<table class="popupStyle" id="pop3" cellpadding="5"
cellspacing="0" border="0">
<tr><td>Un peu de texte.</td></tr>
<tr><td><img src="savoir30.gif" width="160"
height="60" align="middle" border="1" style="border-width:
2px; border-color: darkblue;"></td></tr>
<tr><td>Encore du texte.</td></tr>
</table>
7. Pour résumer
L'utilisation de ces objets se décompose en deux parties :
Une partie HTML dans laquelle on lie un évènement (onClick, onMouseOver, etc.) à l'apparition du popup ;
Une partie JavaScript qui elle-même se découpe en quatre étapes :
Création de l'objet via createPopup() ;
Écriture du contenu et du style de cet objet via document.body.innerHTML et les attributs classiques de style ;
Affichage de l'objet via show() ;
Masquage de l'objet via hide() (éventuellement, puisque dans tous les cas, un clic en dehors de l'objet le ferme).
En savoir plus
