• Présentation au survol

    Survolez ces boutons

    Votre texte ou vos images peuvent être réduits en dimension pour se dérouler au survol.
    Ce premier paragraphe est paramétré pour afficher les lignes sans saut de ligne
    automatique et avec une hauteur au survol, qui se règle en automatique, en fonction de la hauteur du texte.
    La hauteur au départ est de 50px et, au survol, elle devient "auto" ce qui lui permet de s'adapter à la hauteur
    du texte, ce qui oblige à placer des sauts de ligne en manuel.

     

    Le cadre du contenant, à fond marron, est de 800x600px, pour cet exemple.
    On peut, bien sûr, lui donner les dimensions que l'on souhaite.
    Si on veut que chaque bouton s'ouvre en partant du point haut:gauche du montage, il faut faire attention à
    ce que les dimensions de ces paragraphes ne fassent pas sortir le curseur de dessus au survol
    et stoppe l'animation.
    Dans mon exemple, je ne fait remonter ce paragraphe que de 50px; s'il remonte de 100px, le curseur sort
    de dessus

     

    Les boutons peuvent être placés où on le souhaite, dans le montage, en prenant garde que, si on lance
    l'animation au survol, leur animation ne fasse pas sortir le curseur de dessus
    Sinon, il faudrait peut être prévoir le montage au clic, ce qui est possible facilement , en ajoutant un bouton
    de retour en position de départ.
    Je vous laisse imaginer toutes les possibilités: positions, dimensions départ et survol, couleurs, formes ...

    code:
    <div style="width: 800px; height: 600px; border: 1px solid black; background: url('http://ekladata.com/Ih7xhoP_QPTtFruc9Bo33ROwq2E/04bgc.jpg');">
    <p style="font-size: 14pt; font-weight: bold; text-align: center;"><span style="background-color: #ffff00;">Survolez ces boutons</span></p>
    <p id="p1">texte1</p>
    <p id="p2">&nbsp;</p>
    <p id="p3">texte2</p>
    <p id="p4">&nbsp;</p>
    <p id="p5">text3</p>
    <p id="p6">code:<br />...</p>
    </div>
    <style type="text/css"><!--
    #p1{position:absolute;transform:translate(0px,0px); width:50px; height:50px; border:1px solid black; background-color:lime; transition:all 1s linear; font-size:12pt; overflow:hidden; white-space : nowrap;}
    #p1:hover{ position:absolute; z-index:2; width:798px; height:auto;}
    #p2{position:absolute;transform:translate(0px,54px); width:50px; height:50px; border:1px solid black; background:url('http://ekladata.com/u5UB3owBm8FyAzA-W3zfZCXPQJE/6509.jpg'); transition:all 1s linear; font-size:12pt;}
    #p2:hover{ position:absolute; z-index:2; width:600px; height:450px; transform:translate(0px,0px);}
    #p3{position:absolute;transform:translate(0px,108px); width:50px; height:50px; border:1px solid black; background-color:rgba(0,255,255,1); transition:all 1s linear; font-size:12pt; overflow:hidden; white-space : nowrap;}
    #p3:hover{ position:absolute; z-index:2; width:798px; height:auto;transform:translate(0px,50px); }
    #p4{position:absolute;transform:translate(748px,0px); width:50px; height:50px; border:1px solid black; background:url('http://ekladata.com/73hB-9eztC7Q2co9oKjr6d9cW9A/6537.jpg'); transition:all 1s linear; font-size:12pt;}
    #p4:hover{ position:absolute; z-index:2; width:600px; height:450px; transform:translate(198px,0px);}
    #p5{position:absolute;transform:translate(748px,54px); width:50px; height:50px; border:1px solid black; background-color:rgb(255,0,0); transition:all 1s linear; font-size:12pt; overflow:hidden; white-space : nowrap;}
    #p5:hover{ position:absolute; z-index:2; width:800px; height:auto; transform:translate(0px,54px);}
    #p6{position:absolute;transform:translate(350px,250px); width:50px; height:50px; border:1px solid black; background-color:rgb(255,255,0); transition:all 1s linear; font-size:12pt; overflow:hidden; text-align:center;}
    #p6:hover{ position:absolute; z-index:2; width:798px; height:570px;transform:translate(0px,-10px); }
    --></style>

    En rédigeant cet article, j'ai espacé les lignes de texte des paragraphes, de façon à en aérer la lecture.
    Pour ça, j'ai ajouté, sur une police de 12pt de hauteur; l'attribut :"line-height:30px;" qui a écrit les lignes
    dans un espace de 30px de haut, séparant ainsi les différentes lignes,
    pour que l'ensemble soit moins difficile à lire.