• onClick en CSS3

    D'après mes premières recherches, il existe plusieurs façons de code, pour remplacer le onClick, (javascript), qui permettait une action au clic.

    "Target" et "Focus" semblent être les sélecteurs pour cela mais "target" provoque un saut de ligne, ce que ne fait pas "focus".

    On peut créer une case "input" ( case "entrée") qui accepte le focus, le focus étant une action au clic.

    On peut, sur cet "input", en définir la taille et placer une image de fond qui, dans ce cas, pourra être animée au clic.

    En donnant un nom à cette case (identifiant), on va pouvoir agir sur elle, et définir l'animation que l'on souhaite, animation qui sera déclenchée au clic.

     Mon premier essai donne ceci, avec 3 images en 800x600px, réduites en vignettes (input) en 80x60px; détail: une case input comporte, par défaut, une petite bordure relief dont il faut tenir compte dans le montage.

    Un clic sur chaque vignette l'anime, selon les paramètres définis; pour revenir à zéro, cliquer sur une zone libre de l'article.

     

    <div style="height: 600px;">
    <p><input id="f1" type="text" /></p>
    <p><input id="f2" type="text" /></p>
    <p><input id="f3" type="text" /></p>
    </div>
    <style type="text/css"><!--
    #f1{ position:absolute;transition:all 1s linear;transform:translate(0px,10px); width:80px; height:60px; background:url(http://ekladata.com/uJjSVcVtmojxfnG--y1KTWhpwy8/3637.jpg);background-size:cover;}
    #f1:focus { position:absolute;transition:all 1s linear;transform:translate(150px,10px); width:800px; height:600px; background-size:cover;}
    #f2{ position:absolute;transition:all 1s linear;transform:translate(0px,100px); width:80px; height:60px; background:url(http://ekladata.com/TFKIinixsSATi2SSJV_-7myRapQ/3638.jpg);background-size:cover;}
    #f2:focus { position:absolute;transition:all 1s linear;transform:translate(150px,10px); width:800px; height:600px; background-size:cover;}
    #f3{ position:absolute;transition:all 1s linear;transform:translate(0px,190px); width:80px; height:60px; background:url(http://ekladata.com/W1wg2zZ9dEo59ot3gtAkg6Ae-HI/3642.jpg);background-size:cover;}
    #f3:focus { position:absolute;transition:all 1s linear;transform:translate(150px,10px); width:800px; height:600px; background-size:cover;}
    --></style>
    Les images étant placées en absolute (indépendantes), il faut leur fixer un cadre pour qu'elles se positionnent dans la page (<div style="height: 600px;">)
    Vous pouvez ajouter des images et positionner les vignettes selon votre montage.
    En CSS, le premier paragraphe d'une input, (ex:f1), correspond aux paramètres de forme et de position; le second, correspond à l'animation au focus (clic).

    Si nous voulons animer un élément B par un clic sur un élément A, nous écrirons le code légèrement différemment; j'y reviendrai.