Boutons Haut & Bas de page qui change au survol de souris

**Splash** · **Splash** Mar 11 Déc 2018 - 20:46

Hi,

Une astuce toute simple, qui sera en accès libre, car publiée sur le FDF, pour mettre sur vos forums un bouton de retour en haut de page et un autre pour se rendre en bas de page.
Ces 2 boutons seront positionnés l'un au dessus de l'autre

Direction je code javascript

Panneau d'administration / Modules / HTML & JAVASCRIPT / Gestion des codes javascript

Cliquez sur Créer un nouveau javascript en bas de page

Mettre ce script Sur toutes les pages :

Code:: $(function(){ //Le lien de l'image d'origine aller en haut var a='https://i.servimg.com/u/f87/11/26/21/37/arrow-17.png'; //Le lien de l'image au survol aller en haut var b='https://i.servimg.com/u/f87/11/26/21/37/naviga13.png'; //Le lien de l'image d'origine aller en bas var c='https://i.servimg.com/u/f87/11/26/21/37/arrow-16.png'; //Le lien de l'image au survol aller en bas var d='https://i.servimg.com/u/f87/11/26/21/37/naviga12.png'; $("body").append('<div class="boutonhaut"> <a class="M14_top"href="#top"> <img src="'+a+'" alt="Aller en haut" /> </a></div><div class="boutonbas"> <a class="M14_bottom"href="#bottom"><img src="'+c+'" alt="Aller en bas" /> </a></div>'); $('.M14_top img').hover(function(){ $('.M14_top img').attr('src',b); }, function(){ $('.M14_top img').attr('src',a); });$('.M14_bottom img').hover(function(){ $('.M14_bottom img').attr('src',d);}, function(){$('.M14_bottom img').attr('src',c);});});

Pensez à

Direction la feuille de style CSS

Panneau d'administration / Affichage / Images et Couleurs / Couleurs / Feuille de style CSS

Mettre ce code à la CSS :

Code:: .boutonhaut { bottom: 60px; right: 10px; position: fixed; z-index: 100; } .boutonbas { bottom: 10px; right: 10px; position: fixed; z-index: 100; }

Pensez à

Vous aurez ces 2 boutons positionnés ainsi en bas de forum sur la partie droite de celui-ci :