• Changement d'image au survol

    Une page récente m'a fait découvrir que le changement d'image en fond (background:url();) ne fonctionnait pas, alors qu'il fonctionne avec un fond de couleur. Survolez ce cadre rouge.
    Pour ne pas surcharger cette page, je vais essayer de mettre en lien ICI, les codes utiliser et vérifier qu'ils peuvent être copiés.

    A

    B

    Vous voyez que l'animation en rotation d'un rectangle le fait dépasser du cadre initial, à moins de le cacher, éventuellement; il faudra donc laisser de la place pour que cette animation ne perturbe pas le reste de l'article ou utiliser une autre animation ... ce que je vais faire maintenant car la rotation fatigue la lecture... à mon avis !

    On peut peut-être trouver une autre écriture, pour obtenir le résultat souhaité (changement d'image progressif par opacité) mais ce n'est pas gagné pour l'incorporer dans un montage à plusieurs actions... à suivre au fur et à mesure de la rédaction de cette page. Survolez cette image.Montage 1.

     

    Un inconvénient de l'animation au survol et que dès que votre curseur sort de dessus l'élément survolé, cette animation s'arrête; nous allons ajouter un élément non animé et invisible pour commander le survol, ce qui va nous permettre de déplacer notre image sans perturber l'animation..Montage 2

     

    Ce qui, en cumulant les deux animations, peut donner...

     

    ...mais qui ne correspond pas à ma recherche de clics multiples... je vais réfléchir ... si, si !