• Créer un bouton clignotant Suite

     

    Infos

    Bouton clignotant avec déclencheur

     

     

     Un petit tour dans les lignes de code utilisées pour cet exemple de bouton mais avec un déclenchement du clic :

     

    Pour créer ce bouton clignotant il nécessite l'utilisation de lignes de code html, css et javascript. Sans la présence de certains éléments dans ces lignes de code, l'animation de clignotement et l'apparence du bouton ne peuvent être pris en compte. Ces éléments sont eux même accompagnés aussi, par diverses propriétés, valeurs, déclarations et instructions :

    Le code à écrire dans la source html

    Créer un bouton clignotant

     

    1° Les lignes de code html :

     

    <p> ... </p>,

    Balise paragraphe qui permet le découpage de texte en ajoutant l'équivalent de 2 retour à la ligne. <p> signifie « Début de paragraphe » et </p> signifie « Fin de paragraphe ».

    <div> ... </div>,

    Balise générique qui permet d'ajouter une structure à un bloc. <div> signifie « Début du bloc » et </div> signifie « Fin du bloc ».

    <a href=""> ... </a>,

    Ancre permettant de définir un lien hypertexte, href étant l'attribut qui permet d'introduire le lien avec un site web distant.

     

    2° Les lignes de code css :

     

    style=" ... ",

    La feuille de style interne, le style est déclaré directement à l'intérieur de la balise html existante, et il indique entre ses tirets l'apparence du bouton mais également d'autres éléments pris en compte comme par exemple une modification du curseur à l'approche du pointeur, un positionnement du bouton dans l'espace, ainsi que des propriétés et valeurs pour du texte.

     

    - Apparence du bouton :

    visibility: visible;

    width:250px; 

    height:40px;

    border-radius: 30px; 

    box-shadow: #db5820 1px 2px 10px; 

    background: #CCFF00;

    border-top: #db5820 5px double; 

    border-bottom: #db5820 5px double;

     

    - Modification du curseur :

    cursor:hand;

     

    - Positionnement du bouton :

    position:absolute;

    left:400px;

     

    - Propriétés et valeurs pour le texte :

    line-height:43px;

    text-align: center;

    color: #db5820; 

    font-size: 18px; 

    font-weight:bold;

     

    3° Les lignes de code javascript :

     

    <script language="javascript"> ... </script>,

    Balise qui contient les fonctions javascript qui vont permettre d'animer. L'insertion du script javascript ici pour cet exemple va servir à donner du dynamisme au bouton grâce à une séquence de commandes qui peuvent être de différents types : déclarations, instructions simples et instructions composées :

     

    - function blink(bl)

    * function (), Fonction qui va permettre de rassembler un ensemble d'instructions à effectuer, cette fonction a pour nom blink, et comme identifiant bl. 

    * blink, définit une action de clignotement. 

     

    - if(condition){ instructions }else{ action/réaction }

    L'instruction if(condition) permet d'exécuter un bloc d'instructions suivant une condition. Si la condition n'est pas bonne l'instruction else, permet de donner l'alternative : 

     if (bl.style.visibility == "visible" ) { bl.style.visibility = "hidden"; } else { bl.style.visibility = "visible"; }
     Signifie : Si(if) le bouton visible(condition) est invisible(instruction), alors(else) le rendre visible(action/réaction) 

     

    - setInterval("blink(bl)",1000); 

    C'est la méthode javascript setInterval(fonction, interval), elle va permettre de lancer la fonction blink(bl), avec comme paramètre le temps déterminé par un nombre en millième de seconde (1000 = 1s).

    *blink étant le nom de la fonction ou action à exécuter, bl étant l'identifiant de l'objet sur lequel sera produit l'action, 1000 étant l'intervalle entre chaque clignotement.

     

    Voici un exemple que ce code affiche : 

     

    « Créer un bouton clignotantAjouter un traducteur »

  • Commentaires

    Aucun commentaire pour le moment



    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :