En poursuivant votre visite de ce site, vous acceptez l'utilisation de cookies pour permettre ses différents services. Voir les Mentions légales.
 
 
 
Vous êtes ici :   Accueil » Images avec transition
 
 
 
    Imprimer la page...
    Imprimer la section...

Images avec transition

Des images qui changent lors du survol de la souris
avec une transition lors de ce changement

paint.png paint
turntable.png turntable
video.png video

Pour produire ce qui est affiché ci-dessus, vous devez avoir créé une ou plusieurs séries d'images :

L'une servira lors du survol et est cachée par la seconde. Appelées ici respectivement : book.png et book2.png

book.png book2.png

L'appel de ces images se situe dans le corps de l'article ou de la boite libre, mais les effets sont générés par du style que l'on place soit dans styleplus.css ou directement dans l'article, la boite libre

Cette seconde solution a ma préférence car elle permet de régler tout au même endroit. Mais, libre à vous de choisir celle que vous préférez, évidemment.

Mes images sont dans le dossier img/imagettes (il vous faut adapter les liens et les images à votre propre configuration, bien sûr !wink). Elles sont au format 192x192px et la taille de l'affichage se fera dans le style.

Dans la partie <style> </style> à placer impérativement en premier dans le code source de l'article ou de la boite libre.

Il y a ceci :

(Il est possible de ne placer que La partie surlignée dans styleplus.)

<style type="text/css">
#rollover {
display: inline-block;
padding: 0;
width: 96px;
height: 96px;
overflow: hidden;
cursor: pointer;
}
#rollover #first-img {
position: relative;
display: block;
top: -96px;
left: 0px;
vertical-align: top;
-moz-transition: all 0.5s linear;
-webkit-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
}
#rollover #second-img {
position: relative;
display: block;
top: 0px;
left: 0;
}
#rollover #first-img:hover {
-moz-opacity: 0.00;
-khtml-opacity: 0.00;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=0);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
filter:alpha(opacity=0);
opacity: 0;
-moz-transition: all 0.5s linear;
-webkit-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
}
</style>

Dans cette partie l'id #rollover sert pour cet exemple, il est possible d'en créer d'autres  #rollover1   #rollover2 ... ou tout autre identifiant unique, dans une même page (pour des tailles d'images différentes par exemple) ou dans des pages différentes pour éviter les conflits si ces images sont affichées simultanément.

width: 96px;
height: 96px;

top: -96px;
left: 0px;

servent à fixer la taille des images et à positionner l'image affichée avant le survol (donc même valeur absolue que height...), left doit rester à 0.

transition: all 0.5s linear;

sert à donner une valeur en seconde, (ici 0.5 seconde) aux transitions, linear est un mode de transition, il y en a d'autres : voir ici par exemple.

opacity: 0;

L'opacité mise à 0 permet de voir l'image cachée... Il est possible d'adopter d'autres valeurs de temps, d'opacité, de mode de transition bien sûr. Il faut tester tout cela...

les préfixes -moz- -webkit- -o- -ms- devant ces règles sont destinés aux différents navigateurs, respectivement (Firefox, Chrome, Opera, Microsoft, j'en oublie sans doute...). Il est possible de se passer de ces préfixes avec le "risque" que l'effet escompté ne s'affiche pas sur tel ou tel navigateur...

Dans le corps de l'article ou de la boite libre, à l'endroit où vous voulez positionner vos images vous placez ce type de code :

<div style="margin-right:5px; display: inline-block;">
    <div id="rollover">
        <a href="https://framasoft.org/" target="_blank">
        <img alt="book.png" id="second-img" src="img/Imagettes/book.png" />
        <img alt="book" id="first-img" src="img/Imagettes/book2.png"
title="book" /></a>
    </div>
</div>

<div style="margin-right:5px; display: inline-block;">
    <div id="rollover">
        <img alt="paint.png" id="second-img" src="img/Imagettes/paint.png" />
        <img alt="paint" id="first-img" src="img/Imagettes/paint2.png"
title="paint" />
    </div>
</div>

<div style="margin-top:5px; clear:both;"></div>

<div style="margin-right:5px; display: inline-block;">
    <div id="rollover">
        <img alt="turntable.png" id="second-img" src="img/Imagettes/turntable.png" />
        <img alt="turntable" id="first-img" src="img/Imagettes/turntable2.png"
title="turntable" />
    </div>
</div>

<div style="margin-right:5px; display: inline-block;">
    <div id="rollover">
        <img alt="video.png" id="second-img" src="img/Imagettes/video.png" />
        <img alt="video" id="first-img" src="img/Imagettes/video2.png"
title="video" />
    </div>
</div>

Les parties <div> </div> en ... servent à les placer dans le même flux, à fixer des marges et à retourner à la ligne

Seules les parties  <div> </div> en ... servent réellement aux images. Il y a un lien vers https://framasoft.org/ pour monter son emplacement dans l'appel.

L'origine de cette petite recherche est sur le blog d'Igor Laszlo .

Pour plus d'information sur cette mise en place, me contacter ou poster sur le forum.


Date de création : 26/03/2016 @ 08:51
Catégorie : Astuces - Changements au survol
Page lue 77972 fois


Réactions à cet article


Personne n'a encore laissé de commentaire.
Soyez donc le premier !