Les boutons "Haut / Bas"

[Liazard]

- http://funairsoftteam.forumgratuit.org/
-
-
- fondateur (novice)
- template non modifié
- CSS personnalisé
-

Bonjours à tous,
C'est une question d’apparence, donc j'espère être au bon endroit.
J'aime bien l'idée des flèches de retour de pages "Haut / Bas".
J'aimerais l'installer via ce tutoriel Ajouter des boutons "Haut / Bas" mais avant,
j'aimerais savoir si il est possible de rendre ces images invisibles lorsque l'on en a pas besoin.
L'idée serait de créer des flèches qui apparaissent par effet de transition "invisible / visible" au passage de la souris (de même manière que l'effet de transition des liens... voir ce tuto pour mieux comprendre de quoi il s'agit Ajouter un effet de transition sur les liens).

J'espère être simple et clair. Puis si l'idée peut intéresser d'autres personnes, autant faire profiter.
Merci de votre aide

[Roxy.]

Bonsoir,

Est-ce qu'un rendu comme ceci vous convient ? http://roxy-test.forumgratuit.org/

Si oui, tout d'abord installer le code Javascript. Vous allez juste le modifier un peu pour donner des classes aux images :

Code:

$(function(){
                  $("body").append('<div class="bouhautbas"><a href="#top"><img src="http://i42.servimg.com/u/f42/09/02/12/09/sort_u10.png" class="img" alt="Aller en haut" /></a> <a href="#bottom"><img src="http://i42.servimg.com/u/f42/09/02/12/09/sort_d10.png" class="img" alt="Aller en bas" /></a></div>');
        });

Ensuite, prenez le premier css du tutoriel (avec la transistion à 0.5). Vous modifier le a par .img. Vous ajoutez ensuite ceci au css de l'image (c'est l'opacité de l'image). Ici j'ai mis 0.4 :

Code:

  opacity:0.4;
filter:alpha(opacity=40);

Pour finir, nous allons créer le hover qui mettra l'opacité au maximum au passage de la souris. Créer donc un .img:hover et placez y :

Code:

  opacity:100;
filter:alpha(opacity=40);

Cordialement,

[Liazard]

...
un poil moins visible et là, c'est le top.

Bien joué et merci pour la rapidité.

Je test et je tiens au jus.

en cours
--------------------------

[Liazard]

ok,
on y est presque, juste une chose et c'est terminé.

comment faire pour que les flèches soient fixé sur l'écran à droite?

Actuellement, elles sont à gauches et reste en bas de page.

[Automne]

Bonjour,

Vous devez appliquer le css du tuto https://forum.forumactif.com/t325685-ajouter-des-boutons-haut-bas

pour avoir les boutons a droite et fixer

Code:

        .bouhautbas {
            bottom: 40px;
            right: 0px;
            position: fixed;
            z-index: 100;
        }

[Liazard]

Ok je teste.

J'apporte le résultat très vite.
MERCI pour votre aide.

en cours
-----------------------

[Liazard]

MERCI,MERCI,MERCI!

Rapidité, efficacité et surtout bien entouré.
Que du bonheur sur Forumactif

Résumé sur ce que qui a été introduit.
Avoir des boutons HAUT / BAS sur la droite fixés sur l'écran avec une transition d'opacité.
Le javascript:

Code:

$(function(){
                  $("body").append('<div class="bouhautbas"><a href="#top"><img src="http://i42.servimg.com/u/f42/09/02/12/09/sort_u10.png" class="img" alt="Aller en haut" /></a> <a href="#bottom"><img src="http://i42.servimg.com/u/f42/09/02/12/09/sort_d10.png" class="img" alt="Aller en bas" /></a></div>');
        });

et le CSS modifié:

Code:

.img {
     -moz-transition:all 0.5s;
        -webkit-transition:all 0.5s;
        -o-transition:all 0.5s;
        transition:all 0.5s;
        opacity:0.1;
filter:alpha(opacity=10);
}
.img:hover {
     opacity:100;
filter:alpha(opacity=40);
}
        .bouhautbas {
            bottom: 10px;
            right: 0px;
            position: fixed;
            z-index: 100;
        }

ça peut servir à d'autres.

Ce topic est maintenant résolu