adHoc.71site.fr

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

La mise en place de cet effet sera plus facile que le tutoriel précédent...

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. Toutes mes images sont placées dans un dossier tutoriels/imagettes placé dans le dossier images d'adHoc, par exemple, ici respectivement : book.png et book2.png

Les règles de style sont dans la partie [style type="text/css"]...[/style]

Elle peut être directement, encadrée de ces balises au début du code source de la page ou de la boîte ou dans un fichier de style additionnel comme c'est le cas ici

Voir son contenu ci dessous :

#rollover {
	display: inline-block;
	padding: 0;
	width: 96px; /*largeur images*/
	height: 96px; /*hauteur images*/
	overflow: hidden;
	cursor: pointer;
}
#rollover #first-img {
	position: relative;
	display: block;
	top: -96px; /*même valeur que hauteur ci-dessus*/
	left: 0px;
	vertical-align: top;
	-moz-transition: all 0.5s linear;
	-webkit-transition: all 0.5s linear;
	transition: all 0.5s linear; /*temps et mode transition*/
}
#rollover #second-img {
	position: relative;
	display: block;
	top: 0px;
	left: 0px;
}
#rollover #first-img:hover {
	opacity: 0; 
	-moz-transition: all 0.5s linear;
	-webkit-transition: all 0.5s linear;
	transition: all 0.5s linear; /*temps et mode transition*/
}

La dimension des images ici est de 96px par 96px. Il faut adapter les valeurs à vos images dans le style ci-dessus.

L'effet de transition dure 0.5seconde, cela aussi peut être adapté et si les valeurs sont mises à 0, l'animation se fera sans transition.

Le mode de la transition est linear. Il y en a d'autres : voir ici par exemple.

J'ai nommé ce fichier animsurvol_images_transition.css : Il est placé dans le dossier css des skins et son appel au début du code source est le suivant :

    <link charset="utf-8" href="skin/css/animsurvol_images_transition.css" rel="stylesheet" />    

Et enfin, ce type de code là où vous souhaitez placer les images :

<div style="margin-right:5px; display: inline-block;">
<div id="rollover"><a href="https://portableapps.com/apps/office/calibre-portable" target="_blank"><img alt="book.png" id="second-img" src="images/tutoriels/imagettes/book.png" /> <img alt="book" id="first-img" src="images/tutoriels/imagettes/book2.png" title="Calibre" /></a>
</div>
</div>

<div style="margin-right:5px; display: inline-block;">
<div id="rollover"><a href="https://portableapps.com/apps/graphics_pictures/lazpaint-portable" target="_blank"><img alt="paint.png" id="second-img" src="images/tutoriels/imagettes/paint.png" /> <img alt="paint" id="first-img" src="images/tutoriels/imagettes/paint2.png" title="Lazpaint" /></a>
</div>
</div>

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

<div style="margin-right:5px; display: inline-block;">
<div id="rollover"><a href="https://portableapps.com/apps/music_video/coolplayerp_portable" target="_blank"><img alt="turntable.png" id="second-img" src="images/tutoriels/imagettes/turntable.png" /> <img alt="turntable" id="first-img" src="images/tutoriels/imagettes/turntable2.png" title="CoolPlayer+" /></a>
</div>
</div>

<div style="margin-right:5px; display: inline-block;">
<div id="rollover"><a href="https://portableapps.com/apps/music_video/vlc_portable" target="_blank"><img alt="video.png" id="second-img" src="images/tutoriels/imagettes/video.png" /> <img alt="video" id="first-img" src="images/tutoriels/imagettes/video2.png" title="VLC" /></a>
</div>
</div>

NB : Les liens vers des logiciels portables de Portable apps sont là pour montrer le fonctionnement.

NB : Les parties du type [div style="margin-right:5px; display: inline-block;"]...[/div] servent à placer les images dans le flux, à placer des marges ou à passer à la ligne... Seules les parties [div id="..."]...[/div] sont obligatoires.

NB : Dans le style et dans le code l'id est #rollover . Il est aisé de créer d'autres règles de style avec d'autres id : #rollover1 #rollover2 ... au cas où, dans une même page, une même boîte, vous auriez des images de tailles différentes... Il faudrait alors reporter les id corrects dans le code... bien sûr...

L'origine de cette astuce était sur le blog d'Igor Lazlo. Hélas, ce blog n'est plus en ligne.

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