Adaptation

Tutoriaux, Web Design, Animations, Bibliothèques

              1.Détection Souris.
           Il est utile et ludique de faire réagir une page aux actions de la souris, Nous allons parler ici de la détection de passage, (mouseover et mouseout) et du click, (mouse down et mouseup). C'est ce que l'on appelle des événements, au même titre que la frappe d'une touche sur le clavier ou l'action sur un joystick.

              2.Mouse Over / Mouse Out.
        Pour démontrer ces actions nous allons utiliser un bouton bicolore, (rollover),


    C'est un jpg, ce qui permet une bonne qualité graphique et un faible poids.
    Nous allons détecter l'entrée du curseur de la souris au-dessus du bouton, (mouseover), pour le faire basculer de rouge à vert et la sortie du curseur du dessus de ce bouton, (mouseout), pour le faire revenir de vert à rouge.
    Définition du calque :
<div id="Bouton" style="position: absolute; left: 90; top: 90; visibility: hidden">
<img name="BoutonImg" border="0" src="images/boutons.jpg" width="200" height="53">
</div>
    Nous utiliserons toujours la même bibliothéque, (imagestripanim).
    L'objet est créé de la même façon, le nombre d'image est fixé à deux, le délai est fixé très bas, (200mS),  pour ne pas provoquer un effet de retard. C'est le paramêtre "Bascule" qui valide la fonction RollOver, tout autre mot que Bascule inhibe cette fonction, par exemple "noBascule"
BoutonCalqueAnim = new StripAnim("Bouton","BoutonImg",2, 200, "Bascule" )
BoutonCalqueAnim.show()

     Corrigé

              3.Application.

        Nous allons appliquer ce bouton a une page de lien, (menu, bookmark, etc...). Pour cela nous allons écrire deux textes et insérer deux boutons qui serviront a initier les liens.

    Le positionnement des calques fait appel  à la syntaxe habituelles du Css, les liens seront appelés à partir des boutons par la syntaxe habituelle, <a href="Porte.htm><img src= etc...></a>, les liens pointant sur une page appelée Porte.htm.
 Corrigé
    Il est important de bien différencier les calques au niveau des noms, nous avons nommé le premier Bouton1 et le deuxième Bouton2, (génial non?)
    Instructions Javascript :
        Dans la fonction Init
//Bouton 1
Bouton1CalqueAnim = new StripAnim("Bouton1","Bouton1Img",2, 200, "Bascule" )
//Bouton 2
Bouton2CalqueAnim = new StripAnim("Bouton2","Bouton2Img",2, 200, "Bascule" )

Bouton1CalqueAnim.show()

Bouton2CalqueAnim.show()

    On voit que les instructions sont dupliquées et on a changé Bouton => Bouton1 puis en Bouton2
    Les lignes commençant par // sont des commentaires et n'ont aucune action.

    Corrigé

            

	Sommaire
Previous		Next