→ Des images qui changent lors du survol de la souris avec des flips (des rotations), anecdotique... ou pour varier les effets.
rotation centrale
Voilà de la place pour afficher un autre contenu.
rotation horizontale
Voilà de la place pour afficher un autre contenu.
rotation verticale...
Voilà de la place pour afficher un autre contenu.
avec des réglages différents...
Voilà de la place pour afficher un autre contenu.
(tailles, fond du back-face...)
Toutes mes images sont placées dans un dossier tutoriels/imagettes placé dans le dossier images d'adHoc.
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
Chaque image possède ses propres id avec des règles particulières #f1_container #f2_container ... . Seule la classe .face est présente une seule fois. Il y a différenciation des classes .face.back (.face.back2 .face.back3 ...) pour régler les attributs des versos de chaque image.
La rotation centrale est évidemment anecdotique et n'a pas de .face.back !
Le mode de la transition est, soit linear soit ease pour les deux dernières images.
J'ai nommé ce fichier animsurvol_images_flip2.css : Il est placé dans le dossier css des skins et son appel au début du code source est le suivant :
Et enfin, ce type de code là où vous souhaitez placer les images :
<div style="margin:0 50px; display: inline-block;">
<div id="f1_container">
<div id="f1_card">
<div class="front face">
<img src="images/tutoriels/imagettes/star.png" />
</div><!-- fin front face -->
</div><!-- fin f1_card -->
</div><!-- fin f1_container -->
<p style="text-align:center;"><strong>rotation centrale</strong></p>
</div>
<div style="margin-right:10px; display: inline-block;">
<div id="f2_container">
<div id="f2_card">
<div class="front face">
<img src="images/tutoriels/imagettes/global.png" />
</div><!-- fin front face -->
<div class="back2 face center">
<p>Voilà de la place pour afficher un autre contenu.</p>
</div><!-- fin back2 face center -->
</div><!-- fin f2_card -->
</div><!-- fin f2_container -->
<p style="text-align:center;"><strong>rotation horizontale</strong></p>
</div>
<div style="margin-top:20px; clear:both;">
</div>
<div style="margin-right:10px; display: inline-block;">
<div id="f3_container">
<div id="f3_card">
<div class="front face">
<img src="images/tutoriels/imagettes/folder128.png" />
</div><!-- fin front face -->
<div class="back3 face center">
<p>Voilà de la place pour afficher un autre contenu.</p>
</div><!-- fin back3 face center -->
</div><!-- fin f3_card -->
</div><!-- fin f3_container -->
<p style="text-align:center;"><strong>rotation verticale...</strong></p>
</div>
<div style="margin-right:10px; display: inline-block;">
<div id="f4_container">
<div id="f4_card">
<div class="front face">
<img src="images/tutoriels/imagettes/compose.png" />
</div><!-- fin front face -->
<div class="back4 face center">
<p>Voilà de la place pour afficher un autre contenu.</p>
</div><!-- fin back4 face center -->
</div><!-- fin f4_card -->
</div><!-- fin f4_container -->
<p style="text-align:center;"><strong>avec des réglages différents...</strong></p>
</div>
<div style="margin-right:10px; display: inline-block;">
<div id="f5_container">
<div id="f5_card">
<div class="front face">
<img src="images/tutoriels/imagettes/document256.png" />
</div><!-- fin front face -->
<div class="back5 face center">
<p>Voilà de la place pour afficher un autre contenu.</p>
</div><!-- fin back5 face center -->
</div><!-- fin f5_card -->
</div><!-- fin f5_container -->
<p style="text-align:center;"><strong>(tailles, fond du back-face...)</strong></p>
</div>
NB : Il n'y a pas de liens cliquables dans ces exemples. Mais il est facile dans l'éditeur de texte de placer des images, des textes, des liens comme à votre habitude. Voir le tutoriel précédent pour les rédiger.
NB : Les parties du type [div style="margin... ; display: inline-block;"]...[/div] servent à placer les images dans le flux, à placer des marges ou à passer à la ligne... (Dans ces [div] sont également inclues les légendes sous les images). Seules toutes les parties [div id="..."]...[/div] à l'intérieur sont obligatoires.