PlrCalq.js v2.10c Retour liste ^
Variable globale
 
Xref utilisée pour afficher le calque toujours au même endroit, quelque soit la largeur de la marge de gauche du document dans la fenêtre... (voir plus bas)

Liste des fonctions disponibles :
 
ShowLayer Affiche un calque
ActivLayer Montre un calque déjà en place
HideLayer Cache un calque
PutLayer positionne un calque (sans nécessairement le montrer)
FlashLayer Affiche un calque pendant un certain temps
Xref

Sert de point de référence permettant l'affichage relatif des calques par rapport à un élément graphique défini dans la page HTML.

exemple :

<table id="Xref" border=...>
  <tr>
    <td>...
 

Paramètres pouvant être pris en compte :

  • X = Abscisse en pixels (= distance horizontale depuis le point Xref)
        valeur par défaut : 0
  • Y = Ordonnée en pixels (= distance verticale depuis le point Xref)
        valeur par défaut : 0

Ces paramètres sont fournis sous forme d'une chaîne de caractères encadrée par deux symboles "simple cote". Cette chaine de caractères regroupe tout ou partie des paramètres, dans n'importe quel ordre et séparés par des virgules.

Exemple : PutLayer('Actu','X=100,Z=600')
ne pas mettre d'espace avant et après le signe "=" ou la virgule !... 

Précaution à prendre lors de la mise en oeuvre :

Il faut initialiser la variable globale Xref en identifiant un tableau qui servira  de référence : <table id="Xref" ...>

Incompatibilité avec les versions précédentes de cette librairie
(jusqu'à la v2.00c) :

Cette librairie ne prend plus en compte les particularités de Netscape 4.x avec sa balise <layer> (mise en conformité avec les règles édictées par le "W3C//DTD HTML 4.01 Transitional"). 

D'où une modification du processus d'identification des calques : il n'est plus nécessaire de faire la différence entre l'identification du calque <div id=Nom> et le nom passé en paramètre dans les fonctions ci-dessous (Nom)...
 
ShowLayer(Nom,Prm) haut de page ^
Description :

Affiche le calque de nom Nom avec les coordonnées du coin supérieur - gauche définies par Prm.
ActivLayer haut de page ^
Description :

Montre le calque de nom Nom.
Ne modifie pas sa position.
HideLayer(Nom) haut de page ^
Description :

Cache le calque de nom Nom.
PutLayer(Nom,Prm) haut de page ^
Description :

Positionne le calque de nom avec les coordonnées du coin supérieur - gauche définies par Prm. 
Ne modifie pas le status "visible / invisible".
FlashLayer(Nom,Prm,Tim) haut de page ^
Description :

Affiche le calque de nom Nom avec les coordonnées du coin supérieur - gauche définies par Prm pendant Tim secondes.
Si pas de délais indiqué : équivaut à ShowLayer.
exemple complet de code Html :

En passant la souris sur le lien xxx, le visiteur fait apparaître puis disparaître le calque 'Lay001'... 

Remarques : 

  • Utilisation d'une chaîne de caractère (XY) pour passage des paramètres aux fonctions ShowLayer et PutLayer.
  • les valeurs de X et Y dépendent de la structure de la page et du navigateur utilisé. En effet celui-ci peut afficher les retraits de paragraphe ou les listes à puce avec des hauteurs différentes !

Pour adapter X et Y au navigateur utilisé :

<script type="text/javascript"> 
  var XY=''; 
  if (document.all) {XY='X=380,Y=1800'} (Internet Exporer)
  else {XY='X=368,Y=1650';} (Firefox)
</script>

Les valeurs indiquées ici sont celles utilisées pour afficher le calque dans cette page...

<html>

<head>
  <script type="text/javascript" src="PlrCalq.js"></script>
  <script type="text/javascript"> 
    var XY=''; 
    if (document.all) {XY='X=380,Y=1800'} 
    else {XY='X=368,Y=1650';} 
  </script>
</head>

<body>
<div align="center">
  <table id="Xref" border="0" width="600" cellspacing="0" cellpadding="0">
    <tr>
      <td>
        <a href='#1'  onmouseover=ShowLayer('Lay001',XY)  onmouseout=HideLayer('Lay001')>xxx<a>
      </td>
    </tr>

  </table>

      (...)

  <div id="Lay001" style="visibility:hidden;background-color:#FFFFFF;z-index:0">
      <table cellspacing="0" cellpadding="0" border="1" width="200">
        <tr>
          <td align="center" height="200"><img border="0" src="ImageIni.gif" width="120" height="120"></td>
        </tr>
      </table>
  </div>
</div>
<script type="text/javascript">PutLayer('Lay001',XY)</script>
</body>

</html>

 
  Edition du 27/11/04 haut de page ^