Créée le, 19/06/2015

 Mise à jour le, 29/06/2020

Visiteurs N°  




Accueil
Site en Français Site en Anglais Nos Promotions Nouveau Blog Nouveautés Moteur de Recherche Votre Caddie Pour Vos Achats Votre Espace Membre Vos Signets et Vos Jeux Préférés Page de Bienvenue Statique
Sommaires
Électronique Fondamentale Technologie Fondamentale Testez vos Connaissances Électronique Théorique Digitale Électronique Pratique Digitale Lexique Électronique Numérique Data book TTL Data book CMOS Dépannage TVC Mathématique
Micro-ordinateurs
Théorique des Micro-ordinateurs Testez vos Connaissances Pratique des Micro-ordinateurs Glossaires sur les Ordinateurs
Physique
La lumière Champ d'action Rayonnement Électromagnétique
Technologies
Classification des Résistances Identification des Résistances Classification des Condensateurs Identification des Condensateurs
Formulaires Mathématiques
Géométrie Physique 1. - Électronique 1. 2. - Électronique 1. 3. - Électrotechnique 1. 4. - Électromagnétisme
Accès à tous nos Produits
E. T. F. - Tome I - 257 Pages E. T. F. - Tome II - 451 Pages E. T. F. - Tome III - 611 Pages E. T. D. - Tome I - 610 Pages N. B. M. - Tome I - 201 Pages E. T. M. - Tome I - 554 Pages Business à Domicile Ouvrages 34 pages gratuits Nos E-books Logiciel Géométrie Logiciel Composants Électroniques
Aperçu de tous nos Produits
E. T. F. - Tome I - 257 Pages E. T. F. - Tome II - 451 Pages E. T. F. - Tome III - 611 Pages E. T. D. - Tome I - 610 Pages E. T. M. - Tome I - 554 Pages Logiciel Géométrie Logiciel Composants Électroniques
Nos Leçons aux Formats PDF
Électronique Fondamentale Technologie Fondamentale Électronique Théorique Digitale Électronique Pratique Digitale Théorique des Micro-ordinateurs Mathématiques
Informatique
Dépannage Win98 et WinXP et autres Dépannage PC Glossaire HTML et Programmes PHP et Programmes JavaScript (en cours de travaux) Création de plusieurs Sites
Forums
Forum Électronique et Infos Forum Électronique et Poésie
Divers et autres
Formulaire des pages perso News XML Statistiques CountUs Éditeur JavaScript Nos Partenaires et nos Liens Utiles Gestionnaire de Partenariat Nos Partenaires MyCircle Sondages 1er Livre d'Or 2ème livre d'Or Annuaires Sites

Signets :
  Leçons suivantes        Leçons précédentes     Bas de page
  Mode JavaScript   Attributs Z-INDEX   Dynamisme des couches
  Méthodes des couches   Evénements liés aux couches   Empilement des couches
  Exemple sur les méthodes   Interface utilisant les couches   Couleurs et unités
  Cliquez ici pour la leçon suivante ou dans le sommaire prévu à cet effet


Les Positionnements Dynamiques HTML :


Jusqu'à présent, au cours de nos leçons, faisons un bilan des différents documents HTML que nous sommes en mesure de produire :

Des pages statiques comportant images et texte ; lorsqu'elles ont été envoyées sur le serveur, elles ont une apparence immuable. Leur mise en page reste relativement limitée.

Des pages que l'on peut qualifier d'interface de saisie, puisqu'elles comportent des éléments d'entrée accessibles au lecteur (les formulaires). Elles peuvent de façon limitée se modifier sans nouvelle connexion au serveur grâce à des scripts (JavaScript). Ces Scripts peuvent agir sur certains éléments existant dans la page, essentiellement les objets du formulaire (listes, champs de saisie, etc.) ou créer de nouvelles fenêtres (alertes, informations, etc.). Ils ne sont pas en mesure d'intervenir sur le texte, ne savent pas réorganiser par exemple un formulaire, en fonction d'un premier choix effectué par le lecteur.

Sous la même dénomination Dynamic HTML, une nouvelle technologie permettant une gestion plus souple du contenu et du comportement de la page. Cette technologie consiste en deux nouveaux concepts simples : les blocs et les couches. Le bloc est intimement lié aux feuilles de style ; il définit un sous-ensemble de la page pouvant contenir texte, images ou formulaire, mais s'enrichit de propriétés particulières : marge à gauche, marge à droite, bordure, couleur, visibilité, etc. Grâce à ces propriétés, il devient possible de placer au pixel près dans une page. Mais surtout les pages deviennent modifiables au travers de script, ce qui autorise le déplacement de blocs, toujours sans recours au serveur, et ainsi la création d'animations. Il est possible à tout moment de rendre un bloc visible, partiellement visible ou invisible. Quant aux couches, elles permettent d'ordonner l'empilement des blocs dans un espace tridimensionnel : premier plan, second plan, arrière plan.

Il est enfin très important de rappeler que HTML n'est dynamique que grâce aux scripts qui seront associés ! On n'animera pas une page si l'on ne décide pas de faire l'effort de programmer un peu ...

Les couches :

On peut imaginer construire plusieurs documents HTML qui s'affichent sur une même page du browser. Chacun des documents est empilé selon un axe Z et peut contenir des blocs de texte, d'images ou de formulaires décrits dans une couche (layer) pouvant être transparente, visible ou invisible. Chacune des couches peut à son tour accueillir d'autres couches, ainsi de suite.

Définir une couche, c'est un minimum lui donner un nom, déterminer sa position dans la page. Si l'on souhaite positionner la couche à une adresse graphique précise dans la page, on utilisera la syntaxe position: absolute et on complétera en donnant au minimum les coordonnées du point en haut et à gauche, LEFT (ou X) et TOP (ou y). La syntaxe position: relative indique que la couche se situera à la suite de la partie du document qui est construit hors de l'ensemble des couches.

Bien sûr, la définition d'une couche peut être faite en mode CSS ou en mode JavaScript.

Mode CSS :

En mode CSS, les caractéristiques de la couche sont codées dans la zone STYLE ; le nom de la couche est précédé du caractère #.

<SPAN> avec Attribut ID :

La construction du contenu de la couche se fait entre les balises <SPAN>, dont l'attribut ID référence une couche précédemment définie ci-dessous dans la zone STYLE.

Exemple d'utilisation du texte :

<HTML>

           <HEAD>

               <TITLE> Exemple de Couches </TITLE>

       <STYLE TYPE="text/css">

                #coucheA {position: absolute; left: 140px; top: 130px;}

                #coucheB {position: absolute; left: 250px; top: 250px;}

                #coucheC {position: relative;}

       </STYLE>

            </HEAD>

          <BODY>

               <SPAN ID="coucheA">

               <font face="Arial" size="3" color="#800008"> <b> Cette couche absolue se trouve &agrave; 140 pixels &agrave; gauche de votre &eacute;cran et 130 pixels du haut </b> </font>

               </SPAN>

               <SPAN ID="coucheB">

               <font face="Arial" size="3" color="#005500"> <b> Cette couche absolue se trouve &agrave; 250 pixels &agrave; gauche de votre &eacute;cran et 250 pixels du haut </b> </font>

               </SPAN>

               <SPAN ID="coucheC">

               <font face="Arial" size="3" color="#0000FF"> <b> Cette couche est relative donc, elle se trouve en haut </b> </font>

               </SPAN>

          </BODY>

</HTML>

Pour visualiser l'aperçu, en cliquant ici. [Exemple 1].

Nous vous montrons un deuxième exemple ci-dessous :

Exemple d'utilisation texte avec graphiques :

<HTML>

           <HEAD>

               <TITLE> Exemple de Couches avec Graphiques </TITLE>

       <STYLE TYPE="text/css">

                #coucheA {position: absolute; left: 120px; top: 200px;}

                #coucheB {position: absolute; left: 200px; top: 400px;}

                #coucheC {position: relative;}

                #DIV1, #DIV2, #DIV3 {border: 1px dashed; padding: 15px; background-color: #CFC; }

       </STYLE>

            </HEAD>

          <BODY>

               <SPAN ID="coucheA">

               <DIV ID="DIV1">

               <font face="Arial" size="3" color="#800008"> <b> Cette couche absolue se trouve &agrave; 120 pixels &agrave; gauche de votre &eacute;cran et 200 pixels du haut [COUCHE "A"] </b> </font>

               </DIV>

               </SPAN>

               <SPAN ID="coucheB">

               <DIV ID ="DIV2">

               <font face="Arial" size="3" color="#005500"> <b> Cette couche absolue se trouve &agrave; 200 pixels &agrave; gauche de votre &eacute;cran et 400 pixels du haut [COUCHE "B"] </b> </font>

               </DIV>

               </SPAN>

               <SPAN ID="coucheC">

               <DIV ID="DIV3">

               <font face="Arial" size="3" color="#0000FF"> <b> Cette couche est relative donc, elle se trouve en haut avec une longueur plus grande [COUCHE "C"] </b> </font>

               </DIV>

               </SPAN>

          </BODY>

</HTML>

Pour visualiser l'aperçu, en cliquant ici. [Exemple 2].

Mode JavaScript :

Dans ce mode, une seule balise se substitue à la définition de couche en zone STYLE et à la balise <SPAN> :

<LAYER> <ILAYER> :

Les attributs ID, TOP et LEFT :

Cette balise apparaît dans le corps du document. Elle admet l'attribut ID pour nommer la couche ainsi que les attributs de positionnement LEFT et TOP. On utilisera LAYER pour un positionnement absolu dans la page, et ILAYER pour un positionnement relatif au reste du document défini hors couche. Si le document hors couche ne contient absolument rien au moment où l'on utilise ILAYER, le contenu décrit dans cette couche se situe à l'adresse 0,0 (voir figure ci-dessus) du browser (tout en haut à gauche).

Exemple d'utilisation texte avec LAYER et ILAYER :

<HTML>

           <HEAD>

               <TITLE> Couches LAYER et ILAYER </TITLE>

       <STYLE TYPE="text/css">

                #coucheA {position: absolute; left: 80px; top: 200px;}

                #coucheB {position: absolute; left: 100px; top: 400px;}

                #coucheC {position: relative;}

                #DIV1, #DIV2, #DIV3 {border: 1px dashed; padding: 15px; background-color: #DADADA; }

       </STYLE>

            </HEAD>

          <BODY>

               <LAYER ID="coucheA">

               <DIV ID="DIV1">

               <font face="Arial" size="3" color="#800008"> <b> Le contenu (LAYER) d&eacute;crit dans cette couche pour un <u>positionnement absolu</u> dans la page se situe &agrave; l'adresse "80,200" du browser [COUCHE "A"] </b> </font>

               </DIV>

               </LAYER>

               <LAYER ID="coucheB">

               <DIV ID ="DIV2">

               <font face="Arial" size="3" color="#005500"> <b> Le contenu (LAYER) d&eacute;crit dans cette couche pour un <u>positionnement absolu</u> dans la page se situe &agrave; l'adresse "100,400" du browser [COUCHE "B"] </b> </font>

               </DIV>

               </LAYER>

               <ILAYER ID="coucheC">

               <DIV ID="DIV3">

               <font face="Arial" size="3" color="#0000FF"> <b> Le contenu (ILAYER) d&eacute;crit dans cette couche pour un <u>positionnement relatif</u> se situe &agrave; l'adresse "0,0" du browser [COUCHE "C"] </b> </font>

               </DIV>

               </ILAYER>

          </BODY>

</HTML>

Pour visualiser l'aperçu, en cliquant ici. [Exemple 3].

A noter : LAYER signifie COUCHE, ce qui veut dire également qu'on peut parler des CALQUES.

La balise <ILAYER> pour des positions relatives, c'est-à-dire, que le point de départ des coordonnées LEFT et TOP seront prises à l'endroit de la déclaration de la balise <ILAYER>. Son équivalant pour Internet explorer est la balise <DIV>. Vous pouvez utiliser la balise <DIV> avec les ID.

Les attributs Z-INDEX, ABOVE et BELOW :

Normalement, les couches s'empilent du dessous vers le dessus dans l'ordre où elles sont été créées. Il est possible de bouleverser cet ordre à l'aide des attributs suivants :

  • Z-INDEX, auquel on attribue un nombre, permet de classer les couches, en mettant le plus au fond, la couche dont l'index est le plus faible. Ainsi, la couche dont Z-INDEX=2 se trouve au-dessus de la couche dont le Z-INDEX=1.

  • ABOVE (dessus) et BELOW (dessous) fonctionnent différemment ; la valeur qu'ils prennent est le nom d'une couche qui doit déjà exister :

Exemple d'utilisation texte avec Ombrage :

<HTML>

           <HEAD>

               <TITLE> Couches LAYER avec Ombrage </TITLE>

       <STYLE TYPE="text/css">

                #coucheA { position: absolute; left: 250px; top: 270px; color: black; font-size: 15pt; }

                #coucheB { position: absolute; left: 252px; top: 272px; color: red; font-size: 15pt; }

       </STYLE>

            </HEAD>

          <BODY>

               <LAYER ID="coucheA">

               <H1> BONJOUR TOUT LE MONDE ! ! ! </H1>

               </LAYER>

               <LAYER ID="coucheB" ABOVE="coucheA">

               <H1> BONJOUR TOUT LE MONDE ! ! ! </H1>

               </LAYER>

          </BODY>

</HTML>

Pour visualiser l'aperçu, en cliquant ici. [Exemple 4].

Dans l'exemple ci-dessus, si l'on fait abstraction du paramètre ABOVE, on devrait voir les mots "BONJOUR TOUT LE MONDE ! ! !" écrivent en noir puisqu'on écrit dans chaque couche le mot à la même place (superposition exacte des mots) et que la couleur rouge est définie dans la seconde couche (donc dessous). Or, dans la couche B, on indique grâce à l'attribut ABOVE que la couche A est dessus. Finalement, les mots "BONJOUR TOUT LE MONDE ! ! !" apparaissent en couleur rouge sur certains browsers.

Attention : sur certains navigateurs, l'attribut ABOVE ne fonctionne pas ...

Petite astuce : on peut remarquer dans cet exemple que si l'on décale un peu (1 ou 2 pixels) le texte rouge vers le haut et à gauche, on donne un effet d'ombrage au mot.

Nous verrons au cours de nos exemples, dans les événements JavaScript associés aux couches, que le Z-INDEX permet de réaliser facilement un système de fiches à onglets.

Les attributs BGCOLOR et BACKGROUND :

Ces attributs permettent de contrôler la couleur de la couche ou de mettre une image, en fond de façon tout à fait similaire à la balise <BODY>. Si ces attributs sont absents, la couche est transparente.

Les attributs WIDTH et HEIGHT :

Ils permettent de définir la largeur (WIDTH) et la hauteur (HEIGHT) de la couche. Dans le sens horizontal, il n'y a pas de coupure des mots. En conséquence, si un mot (ou une image) ne tient pas sur la largeur définie, cette largeur est automatiquement étendue. De même, si l'objet ou le texte nécessite une hauteur plus grande que celle qui est définie, cette hauteur est étendue à la taille requise. On peut éviter ces ajustements automatiques à l'aide de l'attribut CLIP.

Titre_Bonjour_Tout_le_Monde.PNG

L'attribut CLIP :

Cet attribut permet de fixer la zone de visibilité de la couche, à l'aide des quatre coordonnées relatives à la couche indiquées dans l'ordre suivant : LEFT (ou X0), TOP (ou Y0), RIGHT (ou X1), BOTTOM (ou Y1). Ainsi, dans la couche définie comme suit, on contraint le contenu de la couche à ne pas dépasser la largeur et la hauteur fixés :

<LAYER ID="SECONDE" LEFT="40" TOP="60" WIDTH="200" HEIGHT="280" CLIP="0, 0, 200, 280">

Toute information hors du champ de visibilité sera perdu ; il n'y a pas de déclenchement d'ascenceurs !

Titre_Bonjour_Tout_le_Monde_2.PNG

ATTENTION : Les valeurs sont séparées par des virgules. Si l'on ne met pas la chaîne entre guillemets (" "), il ne faut pas mettre d'espaces avant ou après les virgules.

L'attribut VISIBILITY :

C'est en jouant sur la valeur de cet attribut que l'on fait apparaître ou disparaître totalement une couche. Les valeurs peuvent être SHOW pour visible, HIDDEN pour invisible, et INHERIT pour indiquer, dans le cas où des couches sont emboîtées, que la couche hérite de la visibilité de la couche mère.

L'attribut SRC :

Le contenu ou document contenu dans la couche peut être défini comme nous venons de le voir entre les balises <LAYER> et </LAYER>. On peut aussi appeler un document HTML enregistré dans un fichier externe (un peu comme on appelle une image). La valeur attribuée à SRC est l'URL du document à inclure.

Le dynamisme des couches :

Jusqu'à présent, nous avons décrit précédemment, il n'y a pas de comportement dynamique de la page. Tout au plus saurait-on maintenant superposer des textes ou des images. La notion de mouvement, d'apparition ou de disparition d'un élément du décor sera possible car l'ensemble des paramètres de la couche deviendra modifiable, et la page mise à jour en temps réel. Ainsi, on va pouvoir agir depuis un script sur la position du bloc (TOP et LEFT), sur ses dimensions (WIDTH et HEIGHT, sur sa couleur (BGCOLOR), sur sa partie visible (CLIP), sur sa visibilité (VISIBILITY), sur l'empilage (Z-INDEX), etc.

Les propriétés des couches :

1°) - name reflète le nom de la couche spécifiée avec l'attribut ID. Cette propriété n'est pas modifiable.

2°) - left renvoie la position horizontale de la couche par rapport à la couche parente si plusieurs couches sont emboîtées ; s'il n'y a pas d'emboîtement, la position s'effectue par rapport à la page.

3°) - top renvoie la position verticale de la couche par rapport à la couche parente si plusieurs couches sont emboîtées ; s'il n'y a pas d'emboîtement, la position s'effectue par rapport à la page.

4°) - pageX renvoie la position horizontale de la couche par rapport à la page.

5°) - pageY renvoie la position verticale de la couche par rapport à la page.

6°) - zIndex donne la valeur d'empilement affectée à la couche, 0 si aucune affectation n'a été faite.

7°) - bgColor indique la couleur donnée à la couche et null si elle est transparente.

8°) - background.src done l'URL de l'image utilisée en fond.

9°) - clip.top donne la position verticale du début de la zone de visibilité par rapport à la couche. Si l'attribut clip n'a pas été utilisé, la valeur est 0.

10°) - clip.left donne la position horizontale du début de la zone de visibilité par rapport à la couche. Si l'attribut clip n'a pas été utilisé, la valeur est 0.

11°) - clip.right donne la position horizontale de la fin de la zone de visibilité par rapport à la couche. Si l'attribut clip n'a pas été utilisé, on obtient la valeur qui a été affectée automatiquement à la couche.

12°) - clip.bottom donne la position verticale de la fin de la zone de visibilité par rapport à la couche. Si l'attribut clip n'a pas été utilisé, on obtient la valeur qui a été affectée automatiquement à la couche.

13°) - clip.width donne la largeur de la zone de visibilité. Si l'attribut clip n'a pas été utilisé, on obtient la valeur qui a été affectée automatiquement à la couche.

14°) - clip.height donne la hauteur de la zone de visibilité. Si l'attribut clip n'a pas été utilisé, on obtient la valeur qui a été affectée automatiquement à la couche.

15°) - visibility renvoie inherit si la visibilité n'était pas spécifiée ; dans ce cas, il faut aller voir la visibilité du parent pour en déduire si la couche est affichée ou non. Si l'attribut est défini dans la balise, visibility renvoie show ou hide selon le cas.

16°) - src donne l'URL du document dans le cas où le document dans la couche provient d'un fichier externe.

Le nommage des couches dans la hiérarchie JavaScript :

On référence une couche par le mot-clé LAYERS qui s'inscrit dans la hiérarchie des objets JavaScript. Ce mot-clé est indicé par le nom de la couche.

document.layers["nom_de_la_couche"]

document.layers["nom_de_la_couche"].layers["nom_de_la_couche"]

pour des couches imbriquées (couche définie à l'intérieur d'une autre couche).

La hiérarchie des objets dans les couches :

Un document contient une couche qui à son tour contient un document. Ainsi, si un formulaire est défini dans une couche, on accédera à un élément de ce formulaire par :

document.layer["nom_de_la_couche"].document.forms[n].elements[i] ...

On verra l'exemple, un peu plus loin de cette leçon.

Les méthodes des couches :

1°) - moveBy(dx,dy) provoque un déplacement relatif à la position courante.

Exemple : coucheP.moveBy(20,-20) emmène la couche 20 pixels plus à droite et 20 pixels plus haut.

2°) - moveTo(x,y) entraîne le déplacement de la couche à la nouvelle adresse graphique x,y.

3°) - moveToAbsolute(x,y) s'utilise dans le cas des couches emboîtées. En effet, la méthode moveTo provoque alors un déplacement par rapport aux coordonnées de la couche parente. Si l'on veut provoquer un déplacement par rapport à la page du browser, on utilisera cette méthode. Attention : si l'adresse absolue n'est pas à l'intérieur de la couche parente, on perd la couche partiellement ou totalement !

Dans la figure ci-dessus :

1°) - Couche_C.moveToAbsolute(25,25) place la Couche_C au point P ; on perd la visibilité de la Couche_C qui sort de la Couche_P son parent !

2°) - Couche_C.moveTo(25,25) place la Couche_C au point A.

3°) - Couche_C.moveBy(25,25) place la Couche_C au point T.

Le programme suivant permet de tester les différentes options de mouvement.

Exemple d'utilisation de texte LAYER et Mouvement en Escalier :

<HTML>

           <HEAD>

               <TITLE> Couches LAYER avec Mouvements en Escalier</TITLE>

       <STYLE TYPE="text/css">

                #couche_A { position: absolute; left: 120px; top: 120px; color: black; font-size: 18pt; }

                #couche_B { position: absolute; left: 120px; top: 120px; color: blue; font-size: 18pt; }

                #couche_C { position: absolute; left: 120px; top: 120px; color: green; font-size: 18pt; }

                #couche_D { position: absolute; left: 120px; top: 120px; color: yellow; font-size: 18pt; }

                #couche_P { position: absolute; left: 120px; top: 120px; color: brown; font-size: 18pt; }

       </STYLE>

            </HEAD>

          <BODY>

               <BR> <BR>

               <FORM>

               &nbsp;&nbsp;&nbsp;<input type="button" value="Couche A Rouge !" onClick="document.getElementById('couche_A').style.backgroundColor='red'">

               &nbsp;&nbsp;&nbsp;<input type="button" value="Couche B Verte !" onClick="document.getElementById('couche_B').style.backgroundColor='green'">

               &nbsp;&nbsp;&nbsp;<input type="button" value="Couche C Bleue !" onClick="document.getElementById('couche_C').style.backgroundColor='blue'">

               &nbsp;&nbsp;&nbsp;<input type="button" value="Couche D Orange !" onClick="document.getElementById('couche_D').style.backgroundColor='orange'">

               &nbsp;&nbsp;&nbsp;<input type="button" value="Couche P Noire !" onClick="document.getElementById('couche_P').style.backgroundColor='black'">

               &nbsp;&nbsp;&nbsp;<input type="submit" value="Effacement !">

               </FORM>

               <layer id="couche_A">

               <h1> Couche_A </h1>

               <layer id="couche_B">

               <h1> Couche_B </h1>

               <layer id="couche_C">

               <h1> Couche_C </h1>

               <layer id="couche_D">

               <h1> Couche_D </h1>

               <layer id="couche_P">

               <h1> Couche_P </h1>

               </LAYER> </LAYER> </LAYER> </LAYER> </LAYER>

          </BODY>

</HTML>

Pour visualiser l'aperçu, en cliquant ici. [Exemple 5].

On peut superposer les couches, voir l'exemple 6 de l'aperçu ci-dessous :

A noter : C'est les mêmes codes que ci-dessus concernant l'exemple 5 donc, on n'indiquera pas les codes CSS et HTML et enfin, vous pouvez néanmoins cliquer sur le bouton droit de votre souris afin d'ouvrir le menu contextuel et pointer sur "afficher code Source", afin de vous rendre compte du programme légèrement modifié.

Pour visualiser l'aperçu, en cliquant ici. [Exemple 6].

N.B. : Les exemples 5 et 6 fonctionnent correctement avec les browsers Chrome, Firefox, Opéra sauf sur certains Navigateurs, par exemple, Internet Explorer et autres, qu'on verra par la suite de nos leçons concernant le JavaScript, afin d'apporter des corrections à certains programmes

Nous allons indiquer certains paramètres des couches ci-après, afin de pouvoir insérer dans un programme futur selon nos besoins de chacun de nous tous !!

1°) - resizeBy(dx,dy) augmente ou diminue la taille de la couche selon que dx ou dy sont positifs ou négatifs. Exemple : coucheW.resizeBy(-10,20) diminue la largeur de 10 pixels et augmente la longueur de 20 pixels.

2°) - resizeTo(largeur, hauteur) définit une nouvelle taille absolue pour la couche.

3°) - moveAbove(couche) transfère la couche devant la couche spécifiée en argument. Exemple : coucheM.moveAbove(coucheA) empile la coucheM sur la coucheA.

4°) - moveBelow(couche) transfère la couche derrière la couche spécifiée en argument.

5°) - load(url,largeur) charge dans la couche un nouveau document dont l'URL est spécifiée dans le premier argument. Le second argument est obligatoire et contient la largeur de la couche. Exemple : coucheP.load("/Nanterre/Le_Vesinet_Departemental.html",400).

Les événements liés aux couches :

Ces événements sont au nombre de cinq et sont programmés dans la balise <LAYER>. Mais bien sûr, tout événement programmé sur un autre objet (bouton, lien, ...) peut lancer un Script qui interviendra sur des composants d'une couche :

1°) - onFocus survient lorsqu'on clique dans la surface d'une couche.

2°) - onBlur survient lorsqu'on quitte la surface d'une couche, en cliquant ailleurs.

3°) - onMouseOver survient lorsque le curseur glisse sur la couche, sans qu'il soit nécessaire de cliquer.

4°) - onMouseOut survient lorsque le curseur quitte la couche.

5°) - onLoad survient lorsque la couche est chargée par un fichier externe, que la couche soit en mode visible ou non.

Nous allons maintenant étudier quelques exemples très simples permettant de comprendre comment animer du texte ou des zones de texte standard à l'aide d'événements. La grande originalité est que maintenant, on intervient pas seulement sur des objets de formulaire ou sur des images, mais sur du texte ou sur des ensembles incluant tout ce qu'il est possible de mettre dans un document HTML.

Exemple de déplacement d'un texte :

Examinons un exemple simple animant un texte. Il fonctionne de la façon suivante : lorsque l'Internaute approche le pointeur de la souris sur des boutons ou images à votre guise, le texte défile. Celui-ci s'enfuit en glissant, selon une diagonale vers le bas de l'écran ou vers le haut ou encore, soit à gauche, soit à droite du moniteur selon le sens de la position du pointeur de la souris. Le principe d'une telle animation repose sur l'événement onMouseOver programmé dans la couche contenant le texte. Chaque fois que le pointeur de la souris survole les boutons, une fonction, qui augmente les valeurs TOP et LEFT et déplace le texte, est appelée. On peut remarquer qu'à l'événement onMouseOver sont associées deux instructions JavaScript, ce qui est parfaitement légal. La première instruction initialise deux variables globales (dx et dy), en fonction du déplacement du pointeur de la souris, la seconde instruction appelle la fonction qui va animer le texte (OnMouseOver).

Exemple d'utilisation de texte avec Mouvements de défilement :

<HTML>

           <HEAD>

               <TITLE> Couches avec Mouvements de D&eacute;filement </TITLE>

       <Script language="JavaScript">

                function deplace (dx,dy) {

                document.getElementById('Deplacement_Text').style.top

                = parseInt(document.getElementById('Deplacement_Text').style.top)+dy+'px';

                document.getElementById('Deplacement_Text').style.left

                = parseInt(document.getElementById('Deplacement_Text').style.left)+dx+'px';

                }

        </Script>

            </HEAD>

          <BODY>

           <p> <font face="Arial" size="5" color="#800008"> <b> <center> Effleurer l&eacute;g&egrave;rement les boutons et le texte d&eacute;file ! </b> </center> </font> </p>

               <BR> <BR>

                &nbsp; &nbsp; &nbsp; <input type="button" value="D&eacute;placement Haut ! "OnMouseOver = "deplace (0,-50)">

                &nbsp; &nbsp; &nbsp; <input type="button" value="D&eacute;placement Bas ! "onMouseOver = "deplace (0,50)">

                &nbsp; &nbsp; &nbsp; <input type="button" value="D&eacute;placement Gauche ! "OnMouseOver= "deplace (-90,0)">

                &nbsp; &nbsp; &nbsp; <input type="button" value="D&eacute;placement Droit ! "OnMouseOver= "deplace (90,0)">

                <div id="Deplacement_Text" style="position: absolute; left: 310px; top: 390px">  <H1> <font color="#004500"> Vous n'arriverez jamais &agrave; cliquer sur ce texte ! </font> </H1> </div>

          </BODY>

</HTML>

Pour visualiser l'aperçu, en cliquant ici. [Exemple 7].

La fonction "deplace" est programmée ainsi : lorsque l'événement apparaît, les variables globales (dx et dy) seront égale à zéro si le pointeur de la souris reste dans la position initiale, ensuite, on entre dans la fonction "déplace". On incrémente les valeurs (dx et dy et on teste si cette valeur est supérieure aux variables déjà programmées (voir le code ci-dessus). Si tel n'est pas le cas, on incrémente les marges (TOP et LEFT de la variable de 50 à - 90 pixels et de - 50 à 90 pixels, ceci ayant pour effet de déplacer d'autant le texte vers le bas ou vers le haut, ou encore de la gauche vers la droite. On réalise donc ainsi un glissement progressif de 50 à - 90 pixels dans le cas de cet exemple.

Exemple sur l'empilement des couches :

Cet exemple montre comment réaliser un système de fiches à onglets. En cliquant sur l'onglet, la fiche passe au premier plan.

Exemple d'utilisation de Fiches à Onglets :

<HTML>

           <HEAD>

               <TITLE> Fiches &agrave; Onglets </TITLE>

       <STYLE TYPE="text/css">

                * { margin: 0; }

                html { font: 14px / 20px Arial, sans-serif }

                div { opacity: 0.8; position: absolute }

                #div1 { opacity: 0.8; top: 80px; left: 100px; width: 200px; height: 280px; border: 1px dashed #696; padding: 20px; background-color: #99FFFF; }

                #div2 { opacity: 0.8; top: 80px; left: 342px; width: 200px; height: 280px; border: 1px dashed #696; padding: 20px; background-color: #cfc }

                #div3 { opacity: 0.8; top: 80px; left: 584px; width: 200px; height: 280px; border: 1px dashed #900; padding: 20px 20px 20px; background-color: #fdd }

                #div4 { opacity: 0.8; top: 80px; left: 825px; width: 200px; height: 280px; border: 1px dashed #900; padding: 20px 20px 20px; background-color: #FFFF66 }

                #div5 { opacity: 0.8; top: 20px; left: 100px; width: 925px; height: 20px; border: 1px dashed #900; padding: 20px 20px 20px; background-color: #FFDDFF }

                body { background-color:#E6E6E6 ; color:#000000 }

                .onglet {border:solid 1px black ; padding: 7px 7px 7px 13px; margin: 15px 15px 0px 15px }

                a.onglet { background-color:#FFE6CE ; text-decoration: none }

               

       </STYLE>

            </HEAD>

          <BODY LINK="#800008" ALINK="#00FF00" VLINK="#005500">

           <div id="div1">

            <center> <h1> <a class="onglet" href="Fiche_1.html">Fiche 1</a> </h1> </center>

            <BR>

            <p align="justify"> <font face="Arial" size="3" color="#000000"> Ceci est la fiche 1, elle pourrait contenir une image ! </font> </p> <BR> <BR>

            <p align="center"> <img boder="0" src="images/Enfant_4.jpg" width="120" height"120" </p>

            </div>

            <div id="div2">

            <center> <h1> <a class="onglet" href="Fiche_2.html">Fiche 2</a> </h1> </center>

            <BR>

            <p align="justify"> <font face="Arial" size="3" color="#000000"> Ceci est la fiche 2, on pourrait mettre un cours &eacute;lectronique ! </font> </p> <BR>

            <p align="justify"> <font face="Arial" size="3" color="#000000"> Pour obtenir une inductance &eacute;lev&eacute;e, il faut que le noyau soit ferm&eacute; sur lui-m&ecirc;me de fa&ccedil;on que l'ensemble des lignes d'induction soit contenu dans le noyau. </font> </p>

            </div>

            <div id="div3">

            <center> <h1> <a class="onglet" href="Fiche_3.html">Fiche 3</a> </h1> </center>

            <BR>

            <p align="justify"> <font face="Arial" size="3" color="#000000"> Ceci est la fiche 3, on pourrait mettre un cours informatique ! </font> </p> <BR>

            <p align="justify"> <font face="Arial" size="3" color="#000000"> Ils permettent de d&eacute;finir la largeur (WIDTH) et la hauteur (HEIGHT) de la couche. </font> </p> <BR>

            <p align="justify"> <font face="Arial" size="3" color="#000000"> Dans le sens horizontal, il n'y a pas de coupure des mots. </font> </p>

            </div>

            <div id="div4">

            <center> <h1> <a class="onglet" href="Fiche_4.html">Fiche 4</a> </h1> </center>

            <BR>

            <p align="justify"> <font face="Arial" size="3" color="#000000"> Et enfin, ceci est la fiche 4, on pourrait mettre un cours de physique ! </font> </p> <BR>

            <p align="justify"> <font face="Arial" size="3" color="#000000"> Certaines de ces unit&eacute;s vous sont certainement famili&egrave;res telles que le m&egrave;tre ou le kilogramme ; d'autres probablement vous seront inconnues car elles sont utilis&eacute;es ici pour la premi&egrave;re fois. </font> </p>

            </div>

            <div id="div5">

            <h1> <center> Aper&ccedil;u - <a href="Les_Positionnements_Dynamiques.html">retour</a> </h1> </center>

            </div>

          </BODY>

</HTML>

Pour visualiser l'aperçu, en cliquant ici. [Exemple 8].

Cette application fonctionne de la manière suivante : on crée quatre premières couches et quatre premiers styles de feuilles de classe superposables aux couches pour constituer les onglets. Ces quatres couches positionnées sans recouvrement seront toujours visibles et nous avons pas mis un événement de type OnFocus que l'on verra plus tard au cours de nos leçons. Ces quatres premières couches, ont les couleurs suivantes : couleur bleue claire, verte claire, rose claire et enfin, couleur jaune claire ; concernant les feuilles de classe, appartiennent aux onglets comme vous le verrez dans l'aperçu de l'exemple 8.

Les quatre couches suivantes, représentant les fiches, sont ajustées sous ces couches d'onglets. On aurait pu programmer cette application de façon moins concise mais plus compréhensible : sur les événements par exemple onFocus, on aurait appelé un script affectant par exemple la valeur 1 sur le z-index de la fiche correspondante et 0 sur les autres.

Il est à noter que l'on ne peut pas intervenir sur les propriétés above et below qui ne sont accessibles qu'en lecture.

Enfin, remarquez bien qu'un style de paragraphe est appliqué sur le contenu de la fiche afin de "décoller" le texte du bord de chaque fiche. En haut de chaque style de fiche également, vous verrez les onglets fiche 1, fiche 2, fiche 3 et fiche 4 que vous pouver cliquer sur ces derniers qui permettront de charger les pages HTML correspondantes aux fiches.

A noter : Pour bien comprendre cette expérience, il suffit de recopier les codes en faisant comme suit : "copier / coller" puis de les enregistrer dans un bloc note sous un nom par exemple "Essai.html", ne pas oublier le point (.) puis HTML, le tout en minuscule.

Nous vous rappelâmes qu'il ne faut pas confondre une feuille de style de type Couches avec une feuille de style de type Classe. Cependant, pour activer les onglets de chaque page HTML, nous mettons à votre disposition les paramètres suivants : <span class="onglet" href="Fiche_1.html">Fiche 1</span>, ce dernier, l'onglet est actif, tandis que le second ne sera pas actif ou inactif : <a class="onglet" href="Fiche_2.html">Fiche 2</a>.

Exemple sur les méthodes :

Cet exemple propose simplement de diminuer ou d'agrandir la taille du texte relativement simple dans cinq feuilles de style de type couche ...

Exemple d'utilisation pour diminuer ou d'augmenter la taille du texte ou chiffres :

<HTML>

           <HEAD>

               <TITLE> Diminuer ou Agrandir la taille du texte </TITLE>

       <STYLE TYPE="text/css">

                * { margin: 0; }

                html { font: 14px / 20px Arial, sans-serif }

                div { opacity: 1; position: absolute }

                #div1 { opacity: 1; top: 250px; left: 410px; width: 18px; height: 18px; border: 1px dashed #696; padding: 15px; color: #FFFFFF; background-color: #000000; }

                #div2 { opacity: 1; top: 250px; left: 460px; width: 18px; height: 18px; border: 1px dashed #696; padding: 15px; color: #FFFFFF; background-color: #FF0000; }

                #div3 { opacity: 1; top: 250px; left: 510px; width: 18px; height: 18px; border: 1px dashed #696; padding: 15px; color: #FFFFFF; background-color: #000000; }

                #div4 { opacity: 1; top: 250px; left: 560px; width: 18px; height: 18px; border: 1px dashed #696; padding: 15px; color: #FFFFFF; background-color: #FF0000; }

                #div5 { opacity: 1; top: 250px; left: 610px; width: 18px; height: 18px; border: 1px dashed #696; padding: 15px; color: #FFFFFF; background-color: #000000; }

                body { background-color: #E6E6E6 }

       </STYLE>

                <Script language="JavaScript" type="text/javascript">

                var taille;

                taille = 1;

                function changerTaille(modif) {

                taille = taille + modif; document.getElementsByTagName("body")[0].style.fontSize = taille + "em"; }

                </Script>

            </HEAD>

          <BODY>

          <CENTER> <BR> <BR> <BR>

          <input type="button" value="Diminuer Taille" onClick="changerTaille(-0.1); return false;">

          <input type="button" value="Agrandir Taille" onClick="changerTaille(0.1); return false;">

          </CENTER>

          <DIV id="div1" <font face="Arial"> <h2> 1 </h2> </DIV>

          <DIV id="div2" <font face="Arial"> <h2> 2 </h2> </DIV>

          <DIV id="div3" <font face="Arial"> <h2> 3 </h2> </DIV>

          <DIV id="div4" <font face="Arial"> <h2> 4 </h2> </DIV>

          <DIV id="div5" <font face="Arial"> <h2> 5 </h2> </DIV>

          </BODY>

</HTML>

Pour visualiser l'aperçu, en cliquant ici. [Exemple 9].

La feuille de style interne concernant les codes en css (couleur rouge foncée), on peut le mettre dans un fichier séparé du code HTML sous un nom quelconque, à votre guise, par exemple, "essai.css" y compris le Script de couleur verte foncée, par exemple, essai.js.

Et enfin, pour rappeler la feuille de style externe, il suffit de mettre dans la page HTML, le code ci-après : <LINK REL="stylesheet" TYPE="text/css" HREF="essai.css"> ; le nom essai.css est le nom de la feuille de style. Vous pouvez également rappeler le Script comme ci-après : <SCRIPT LANGUAGE="JavaScript" SRC="essai.js"> </SCRIPT> ; le nom "essai.js" est le nom de la feuille de Script, dans cet exemple, "essai.js".

Exemple d'interface utilisant les couches :

En dehors des quelques exemples simples que nous venons de donner, on trouve sur l'Internet de nombreux sites de démonstration de cette technologie. Souvent, on illustre l'intérêt de cette technique avec des jeux ou des animations. La possibilité de jouer sur la visibilité ou sur la disposition d'un ensemble d'objets composant un écran est très intéressante au niveau de l'ergonomie à donner à une interface de saisie. Dans l'exemple suivant, qui décrit une partie de réservation de type TGV, le bouton de réservation du repas n'apparaît que si l'on sélectionne la première classe. L'interface est ainsi allégée, elle s'adapte aux options prises par le lecteur sans pour autant nécessiter une requête vers le serveur.

Exemple d'utilisation pour faire apparaître ou disparaître un bouton quelconque :

<HTML>

           <HEAD>

               <TITLE> Faire Appara&icirc;tre ou dispara&icirc;tre un bouton </TITLE>

       <STYLE TYPE="text/css">

                * { margin: 0; }

                html { font: 14px / 20px Arial, sans-serif }

                div { opacity: 1; position: absolute }

                #div1 { opacity: 1; top: 250px; left: 271px; width: 128px; height: 18px; border: 1px dashed #696; padding: 15px; color: #FFFFFF; background-color: #000000; }

                #div2 { opacity: 1; top: 250px; left: 431px; width: 128x; height: 18px; border: 1px dashed #696; padding: 15px; color: #FFFFFF; background-color: #FF0000; }

                #div3 { opacity: 1; top: 250px; left: 583px; width: 145px; height: 18px; border: 1px dashed #696; padding: 15px; color: #FFFFFF; background-color: #000000; }

                #div4 { opacity: 1; top: 100px; left: 100px; width: 980px; height: 40px; border: 1px dashed #900; padding: 20px 20px 20px; background-color: #FFDDFF }

                body { background-color: #E6E6E6 }

       </STYLE>

       <BR> <BR> <BR>

                <Script language="JavaScript">

                function OUI() { document.getElementById("Reservation").style.visibility = "visible" }

                function NON() { document.getElementById("Reservation").style.visibility = "hidden" }

                </Script>

            </HEAD>

          <BODY>

          <DIV ID="div4"> <p align="justify"> <font face="Arial" size="4"> Lorsqu'on clique sur le bouton "Premi&egrave;re classe", on fait appara&icirc;tre le bouton "R&eacute;servation repas". Si l'on clique ensuite sur la "Seconde classe", on fait dispara&icirc;tre ce bouton ! </font> </p>

          <form method="post" action="">

          <table>

          <tr> <td>

          <DIV ID="div1"> <input type="radio" name="Repas" value="oui" onClick="OUI();"> Premi&egrave;re Classe </DIV>

          <DIV ID="div2"> <input type="radio" checked name="Repas" value="non" onClick="NON();"> Seconde Classe </DIV>

          </td> </tr>

          <tr ID="Reservation" style="visibility: hidden;">

          <td>

          <DIV ID="div3"> <input type="checkbox"> R&eacute;servation Repas </DIV>

          </td> </tr>

          </table>

          </form>

          </BODY>

</HTML>

Pour visualiser l'aperçu, en cliquant ici. [Exemple 10].

Couleurs et unités :

Dans cette leçon, nous avons utilisé les couleurs, en les nommant plutôt qu'en indiquant la valeur des composantes RGB. En effet, depuis HTML, il est possible d'utiliser les couleurs définies dans la palette Windows VGA (Vidéo Graphique Analogique), soit : aqua, black, fuchsia, gray, green, lime, marroon, navy, olive, purple, silver, red, teal, white, yellow.

Sans indication spéciale, les unités sont le pixel (symbol px) ou encore le point (symbole pt). On peut aussi donner des unités relatives à la taille de la fonte en cours. Ainsi, tags.P.marginLeft="2em" provoquera un espace à gauche égal à deux fois la hauteur de l'élément fonte.

Nous résumons cette dixième leçon ci-après :

On définit une couche par son nom et par son positionnement dans la page, adresse graphique du coin en haut et à gauche : TOP et LEFT

En mode CSS, la couche est définie à l'intérieur des balises de style <STYLE> et </STYLE>. Son nom est précédé du caractère #.

La couche peut être positionnée en absolu ABSOLUTE (adressage graphique dans la page) ou en relatif RELATIVE (adresse graphique par rapport au dernier élément défini dans le document hors couche). Le contenu de la couche est codé entre les balises <SPAN ID=nom_de_la_couche> et </SPAN>.

En mode JavaScript, les balises <LAYER> pour positionnement absolu et <ILAYER> pour positionnement relatif permettent à la fois de définir la couche et d'en coder le contenu jusqu'à la balise de fin </LAYER. En plus d'ID, TOP et LEFT, la balise <LAYER> admet les atibuts suivants : (selon les navigateurs).

  • BGCOLOR pour la couleur de font de la couche,

  • BACKGROUND pour mettre une image en fond,

  • WHIDTH et HEIGHT pour régler la largeur et la hauteur de la couche (en pixels),

  • CLIP pour régler la zone de visibilité de la couche (en pixels),

  • VISIBILITY pour faire disparaître la couche (VISIBILITY=HIDDEN), la montrer (VISIBILITY=SHOW), ou dans le cas de couches imbriquées, pour prendre la visibilité de la couche dans laquelle cette couche est elle-même définie (VISIBILITY=INHERIT),

  • SRC pour permettre d'aller chercher à l'URL qu'il définit un fichier contenant le codage du contenu de la couche (SRC=URL).

Propriétés des couches :

  • NAME renvoie le nom de la couche,

  • LEFT et TOP renvoient l'adresse graphique de la couche relativement aux couches parentes en cas d'imbrications de couches.

  • pageX et pageY renvoient toujours l'adresse graphique de la couche dans la page.

  • zIndex renvoie la valeur d'empilement.

  • bgColor renvoie la couleur du fond.

  • BACKGROUND.SRC renvoie l'URL de l'image mise en fond.

  • CLIP.WIDTH et CLIP.HEIGHT renvoient les dimensions de la zone de visibilité de la couche.

  • CLIP.TOP, CLIP.LEFT, CLIP.RIGHT et CLIP.BOTTOM renvoient les adresses graphiques de la zone de visibilité.

  • VISIBILTY renvoie l'information concernant l'affichage de la couche.

  • SRC renvoie l'URL du document contenu dans la couche si cette dernière utilise un fichier externe.

Méthodes des couches :

  • moveBy (dx,dy) déplacement relatif,

  • moveTo (x,y) déplacement absolu par rapport à la couche,

  • moveToAbsolute déplacement absolu par rapport à la page,

  • resizeBy (dx,dy) augmentation ou diminution de la taille de la couche,

  • resizeTo(largeur, hauteur) redéfinition de la taille de la couche,

  • moveAbove(couche) placement de la couche devant la couche définie en argument,

  • moveBelow(couche) placement de la couche derrière la couche définie en argument,

  • load(url,largeur) chargement du document dont l'URL est spécifiée dans la couche dont la largeur est obligatoirement précisée.

Les événements des couches :

  • onFocus apparaît lorsqu'on clique sur la couche.

  • OnBlur apparaît lorsqu'on quitte une couche en cliquant en dehors.

  • onMouseOver apparaît lorsque la souris survole la couche.

  • onMouseOut apparaît lorsque la souris quitte la surface de la couche.

  • onLoad apparaît lorsqu'un fichier est chargé dans une couche.

Fin de cette dixième leçon, la prochaine sera consacrée aux Images cliquables concernant le langage HTML.










Nombre de pages vues, à partir de cette date : le 23 MAI 2019

compteur de visite

    




Envoyez un courrier électronique à Administrateur Web Société pour toute question ou remarque concernant ce site Web. 

Version du site : 10. 5. 14 - Site optimisation 1280 x 1024 pixels - Faculté de Nanterre - Dernière modification : 29 JUIN 2020.   

Ce site Web a été Créé le, 14 Mars 1999 et ayant Rénové, en JUIN 2020.