Dhtml Tutorial 10

Dimensions

              1.Largeur, Hauteur & Profondeur.
    Largeur
    Nous avons déjà vu l'attribut Width, (Largeur), si on précise seulement la largeur, le calque s'ajuste en hauteur pour afficher le texte
    Hauteur
    On peut spécifier la hauteur du calque par l'attribut :
    height : 100
    Les deux navigateurs ajustent automatiquement la hauteur si elle n'est pas suffisante pour contenir le texte.
    Si la hauteur est supérieure à celle du texte, nous avons ici un comportement différend pour les deux navigateurs :
    IE affiche un calque de la largeur/hauteur spécifié
    Netscape s'adapte au texte
    Exercice : dans la forme ci dessous, faire varier la largeur et la hauteur du calque "Calque1"

    Images
    Dans la forme ci-dessus remplaçons le texte du calque 1 par une image
    Exercice : Faites varier la largeur et la hauteur de "Calque1"
    Nous pouvons observer que sous IE nous voyons le calque s'étendre en largeur et hauteur, sous Netscape le calque est limité à l'image.

                2.Profondeur, Position en 3D.
    Les attributs left et top permettent de positionner le calque en 2 D, l'attribut z-index le permet en profondeur. Exemple z-index : 16 , le chiffre suivant l'attribut ne signifie rien par lui-même, mais il signifie que le calque possédant cet attribut sera devant un calque de z-index : 15 et dessous un calque de z-index : 17.
    Nous allons donc utiliser plusieurs calque pour pouvoir préciser leur position les uns par rapport aux autres. Dans la forme ci-dessous nous créons trois calque, un texte z-index : 10, une image z-index : 12, une autre image z-index : 14. Observez le résultat.
    Exercice : Inversez l'ordre des calques, "Calque1" z-index 14, , "Calque2" z-index 12, "Calque3" z-index 10 .Corrigé
    Exercice : Changer les z-index des calques de façon à ce que "Calque2" soit au-dessus . Corrigé

Code Exemple 2:
<html> <head> <title>Positionnement en Profondeur</title> </head> <body background="images/lighttex.jpg" bgcolor="#FFFFFF" style="font-family:Arial;font-size:15pt;color:black"> <Div id="Calque1" style="position : absolute ; left : 20 ; top : 20 ; width : 200 ; height : 100 ; z-index : 10 ; background-color : gold"> Ce tutorial doit permettre d'appliquer les connaissances au fur et à mesure de leur acquisition </Div> <Div Id="Calque2" style="position : absolute ; left : 40 ; top : 40 ; width : 200 ; height : 200 ; z-index : 12"> <img border="0" src="images/algues.jpg" width="200" height="200"> </Div> <Div Id="Calque3" style="position : absolute ; left : 80 ; top : 80 ; width : 200 ; height : 200 ; z-index : 14"> <img border="0" src="images/camee.JPG" width="200" height="200"> </Div> </body> </html>

    Qu'arrive-t-il si on ne spécifie pas l'attribut z-index ?
    Dans ce cas les calques sont superposés dans l'ordre d'écriture sur la page.
    Exercice : supprimer les attributs z-index pour les trois calques. Corrigé.
    Si deux ou plusieurs z-index ont la même valeur?
    On applique la règle précédente .
    Exercice : Mettre les trois calques au z-index 12 . Corrigé

                3.Visibilité.
    Cet attribut permet de préciser si le calque est visible ou non. Cette option n'est utilisé qu'avec un script, (ex : javascript), par exemple pour révéler une image si le cursor passe au dessus. Nous nous contenterons de créer cet effet manuellement, ce qui je le conçois est bien moins ludique.
    Dans le cours de Javascript qui suit celui-ci nous utiliserons cet option.
    Syntaxe : visibility : visible (visible) ou visibility : hidden (invisible).
    Exemple : Afficher la forme ci-dessous, le calque "Calque2" n'apparaît pas.
    Exercice : Faites apparaître ou disparaître les calques en changeant l'attribut visibility.

Code Exemple 3:
<html> <head> <title>Positionnement en Profondeur</title> </head> <body background="images/lighttex.jpg" bgcolor="#FFFFFF" style="font-family:Arial;font-size:15pt;color:black"> <Div id="Calque1" style="position : absolute ; left : 20 ; top : 20 ; width : 200 ; height : 100 ; background-color : gold ; visibility : visible"> Ce tutorial doit permettre d'appliquer les connaissances au fur et à mesure de leur acquisition </Div> <Div Id="Calque2" style="position : absolute ; left : 40 ; top : 40 ; width : 200 ; height : 200 ; visibility : hidden"> <img border="0" src="images/algues.jpg" width="200" height="200"> </Div> <Div Id="Calque3" style="position : absolute ; left : 80 ; top : 80 ; width : 200 ; height : 200 ; visibility : visible"> <img border="0" src="images/camee.JPG" width="200" height="200"> </Div> </body> </html>

    Héritage
    Si un calque est inclus dans un autre, le comportement est différend suivant les navigateurs ;
        Sous Netscape, le calque contenu est rendu visible ou caché en même temps que le calque contenant. (le calque est caché même si son attribut visibility est à visible)
        Sous IE l'attribut n'est pas hérité, sauf si l'attribut visibility n'existe pas dans le style, (à tester sur toutes les plateformes !).
    L'attribut visibility étant généralement piloté par un script, il n'est pas absolument nécessaire de prévoir des calques servant de containers à d'autres calques, que l'on pourrait ainsi cacher ou révéler.

	Sommaire
Précédent		Suivant