adHoc.71site.fr

→ Des images qui changent lors du survol de la souris

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/imagettes64 placé dans le dossier images d'adHoc, par exemple, ici respectivement : document.png et document2.png

Une partie de l'appel à ces images est 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 :

#chat a {
	display: inline-block;
	background: url("..\..\images/tutoriels/imagettes64/chat.png") no-repeat;
}
#chat a:hover img {
	visibility: hidden;
}
#document a {
	display: inline-block;
	background: url("..\..\images/tutoriels/imagettes64/document.png") no-repeat;
}
#document a:hover img {
	visibility: hidden;
}
#phone a {
	display: inline-block;
	background: url("..\..\images/tutoriels/imagettes64/phone.png") no-repeat;
}
#phone a:hover img {
	visibility: hidden;
}
#tools a {
	display: inline-block;
	background: url("..\..\images/tutoriels/imagettes64/tools.png") no-repeat;
}
#tools a:hover img {
	visibility: hidden;
}

Attention ! J'ai placé volontairement des barres obliques inversées ( \ antislashs) à la place des barres obliques (/ slashs) dans les urls ci-dessus afin que les chemins s'affichent totalement, n'oubliez pas de rétablir des barres obliques correctes dans vos chemins.

J'ai nommé ce fichier animsurvol_images_simples.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_simples.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="chat"><a href="https://framatalk.org/accueil/fr/" target="_blank" title="Framatalk"><img alt="chat" src="images/tutoriels/imagettes64/chat2.png" /></a>   
</div>
</div>

<div style="margin-right:5px; display: inline-block;">
<div id="document"><a href="https://framapad.org/fr/" target="_blank" title="Framapad"><img alt="document" src="images/tutoriels/imagettes64/document2.png" /></a>    
</div>
</div>

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

<div style="margin-right:5px; display: inline-block;">
<div id="phone"><a href="https://framapiaf.org/about" target="_blank" title="Framapiaf"><img alt="phone" src="images/tutoriels/imagettes64/phone2.png" /></a>    
</div>
</div>

<div style="margin-right:5px; display: inline-block;">
<div id="tools"><a href="https://framemo.org/" target="_blank" title="Framamemo"><img alt="tools" src="images/tutoriels/imagettes64/tools2.png" /></a>    
</div>
</div>

NB : Les liens vers des outils de Framasoft 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 : L'origine de cette astuce est sur le blog d'Emmanuel Béziat

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