Ajouter feuille de style et script
Style et script : fichier ou code source
Service de téléchargements (v1)
Service de changement de skin (thème) à la volée
Service de calendrier avec des liens
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.
adHoc
adHoc
Module MessageNouveau
Carousels
Slideshow de textes (quote slideshow)
adHoc
adHoc
adHoc
adHoc
adHoc
adHoc
adHoc
adHoc
Iframes responsives
Camera
Unite Gallery
Animations au survol
Autres astuces en CSS
Audio-Players
Carousels