Clip & Clap

              1.Clip.
    L'attribut clip détermine une région rectangulaire dans un calque. Cette région est la seule visible du calque. L'attribut visibility s'applique à cette région. Elle permet différend effets généralement à l'aide de scripts.


Région de clip

    Sur l'image ci-dessus, l'écran est en gris, le calque est en bleu et la région à visualiser est en rouge, seule la région en rouge sera visible.
    Syntaxe ,  clip : rect(haut droit bas gauche)

Moyen mnémotechnique, vous avez sûrement remarqué que l'ordre des valeurs de clips est prise en tournant autour d'un rectangle dans le sens des aiguilles d'une montre.

    Les distances sont prises à partir du coin haut et gauche du calque, (pas de l'écran), indiqué sur l'image par 0,0. Les distances sont en pixels.
    Exemple, clip : rect(50 150 100 50) 
    Haut 50 la région de clip démarre à 50 pixels du haut du calque.
    Droit 150 la région de clip s'arrête à 150 pixels du bord gauche du calque.
    Bas 100  la région de clip s'arrête à 100 pixels du haut du calque
    Gauche 50 la région de clip démarre à 50 pixels du bord gauche du calque.
    Application
    Dans la forme ci dessus nous superposons exactement une photographie et la même Pour voir la photo en couleur inversée passez visibility du calque 'Photo' à hidden photo inversée, cette dernière se retrouve dessous. Cette photo mesure 200 x 200 pixels.
    L'instruction clip est fixée à La zone de clip couvre pour la largeur et la hauteur une zone de 0 à 200, ce qui recouvre l'image. clip : rect(0 200 200 0), la zone de clip couvre la photo entière si bien que quand vous ferez "Afficher la page" vous ne verrez que la photo normale.
Exercices à effectuer dans la forme ci-dessous.

Vue de départ / Code initial
Exercice : Limiter la zone d'affichage de la photo normale, calque "Photo" à la moitié gauche de l'image, comme dans l'image ci-contre  Corrigé
Exercice : Afficher le quart haut droit de l'image, comme dans l'image ci-contre  Corrigé
Exercice : Afficher seulement la partie centrale, un carré de 100 x 100 pixels également espacé des bords de l'image, comme dans l'image ci-contre. Corrigé

       Code Exemple 1:

           

              2.Position.
    La partie clippée se retrouve positionnée à la place qu'elle occuperait si toute l'image était affichée. C'est important dans le cas d'affichages d'images en bandes comme :

    Cette animation de poisson comporte 3 images de chacune 100 pixels, on peut facilement les isoler une par une, nous les affichons les unes au dessus des autres à 200 pixels du bord de page et en corrigeant le décalage dut à la position des images dans la bande :







    Syntaxe :
<div id="Poisson1" style="position : absolute ; left : 200 ; visibility : visible ; clip:rect(0 100 32 0)">
<imgborder="0" src="images/poissonvolant.GIF" width="300" height="32">
</div>
    Poisson2 sera affiché 100 pixels moins loin pour compenser son décalage dans la bande, le clip est entre 100 et 200 pixels, (largeur).
<div id="Poisson2" style="position : absolute ; left : 100 ; visibility : visible ; clip:rect(0 200 32 100)">
<imgborder="0" src="images/poissonvolant.GIF" width="300" height="32">
</div>
    Et ainsi de suite pour le troisième poisson.
    En les isolant et les affichant l'une après l'autre nous réalisons une animation,  comme celle que vous pouvez voir dans cette nouvelle fenêtre.
    Dans Web Design j'expose une maniére de réaliser des animations à partir de mes bibliothéques.
.Clickez sur le bouton Afficher la page dans la forme ci-dessous

   Fin de ce tutorial

   Autres Tutoriaux

 


Sommaire
Précédent