• Utilisation des boutons

    Nous avons vu comment se créer ses boutons personnalisés; il nous faut maintenant les utiliser dans un montage.

    La plupart du temps, nous allons placer plusieurs boutons de même type, avec chacun une action différente, ce qui vase faire en CSS3.

    En exemple, je vais reprendre un code de bouton que vous trouverez sur ma page Bouton, de mon catalogue et placer plusieurs boutons qui changeront la couleur de fond d'un cadre au survol.

    Pour cela, nous allons indiquer, en CSS, le type du bouton sera nommé: class="bt" et chaque bouton sera identifié par id="bt1"/bt2/bt3...dont le survol changera la couleur de fond du cadre principal, comme on pourra leur faire changer d'image, dans un montage, en remplaçant l'adresse de la texture par celle de votre image.

     

    A

    B

    C

    D

     


    <div style="height: 600px;">
    <p id="bt1" class="bt">A</p>
    <p id="bt2" class="bt">B</p>
    <p id="bt3" class="bt">C</p>
    <p id="bt4" class="bt">D</p>
    <p id="fd">&nbsp;</p>
    </div>

    <style><!--
    #fd{transition:all 1s linear; position:absolute; z-index:1; transform:translate(100px,0px);width:800px; height:600px; border:1px solid black; background:url('http://ekladata.com/V7wsGzLrY7Ec7PdhAotcvVVxVOY/bacteria4.jpg'); background-size:cover;}
    .bt{width: 40px; height:40px; border: 1px solid black; border-radius: 50%; background: url('http://ekladata.com/Ux3YknLVZ-vxdNrt78dJhkfQJjY/img637.jpg'); background-size: cover; box-shadow: inset 0px 0px 0px 2px white; text-align: center; font-size: 20pt; color: white; text-shadow: 1px 1px black;}
    #bt1{ position:absolute; z-index:2; transform:translate(800px,50px); }
    #bt2{ position:absolute; z-index:2; transform:translate(800px,100px); }
    #bt3{ position:absolute; z-index:2; transform:translate(800px,150px); }
    #bt4{ position:absolute; z-index:2; transform:translate(800px,200px); }
    #bt1:hover~#fd{ background: url('http://ekladata.com/oj9cBGsEbtTcW2jYoZ6EpMYJ4js/000032-tile.jpg');}
    #bt2:hover~#fd{ background: url('http://ekladata.com/H3wWysQzJwf-vF8sZeMXXstYNgU/00001.jpg');}
    #bt3:hover~#fd{ background: url('http://ekladata.com/S_cGA68ClBc26Ct7RJO9Jni-gCw/2336.jpg');}
    #bt4:hover~#fd{ background: url('http://ekladata.com/tQoXB4-Gr-rJYmh67JrbdWy1qrM/b.jpg'); background-size:cover;}
    --></style>


     

    Quelques détails à remarquer: 
    La <div style="height:600px;"> n'est là que pour contenir le montage afin de l'intégrer dans l'article.
    L'identification en class="bt" doit être paramétrée en CSS par .bt (point bt) alors que les identification en id="bt1" sont paramétrées en #bt1
    Chaque élément est positionné et défini et son animation au survol anime l'élément identifié en id="fd"
    Sans oublier qu'un élément qui en commande un autre, doit être écrit en premier, avant l'élément animé, même si, à l'affichage, on le positionne où on le veut.

    J'ai créé, en médiathèque, un dossier: 001textures, qui se place en haut de page et dans lequel j'ai hébergé des textures, enregistrées sur le net, en petit format, ce qui les déforme pour remplir le cadre de 800x600px, mais le but de cette page est de montrer comment donner une animation par un bouton personnalisé.