Les boutons "Haut / Bas"

3 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Les boutons "Haut / Bas"

Message par Liazard Lun 25 Fév 2013 - 17:31

- http://funairsoftteam.forumgratuit.org/
- Les boutons "Haut / Bas" Mm36aa10
- Les boutons "Haut / Bas" Tutobo10
- fondateur (novice)
- template non modifié
- CSS personnalisé
- Les boutons "Haut / Bas" Chrome10

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 Mr. Green
Liazard

Liazard
*

Masculin
Messages : 42
Inscrit(e) le : 05/10/2011

http://funairsoftteam.forumgratuit.org
Liazard a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Les boutons "Haut / Bas"

Message par Roxy. Lun 25 Fév 2013 - 22:50

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,
Roxy.

Roxy.
Membre habitué

Féminin
Messages : 1058
Inscrit(e) le : 24/07/2011

http://roxy-test.forumgratuit.org/
Roxy. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Les boutons "Haut / Bas"

Message par Liazard Lun 25 Fév 2013 - 22:52

... I love you
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

Liazard
*

Masculin
Messages : 42
Inscrit(e) le : 05/10/2011

http://funairsoftteam.forumgratuit.org
Liazard a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Les boutons "Haut / Bas"

Message par Liazard Lun 25 Fév 2013 - 23:10

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.
Liazard

Liazard
*

Masculin
Messages : 42
Inscrit(e) le : 05/10/2011

http://funairsoftteam.forumgratuit.org
Liazard a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Les boutons "Haut / Bas"

Message par Automne Mar 26 Fév 2013 - 0:52

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;
        }
Automne

Automne
Membre actif

Messages : 8431
Inscrit(e) le : 22/03/2010

https://gilles570.motards.net/
Automne a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Les boutons "Haut / Bas"

Message par Liazard Mar 26 Fév 2013 - 11:48

Ok je teste.

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

en cours
-----------------------
Liazard

Liazard
*

Masculin
Messages : 42
Inscrit(e) le : 05/10/2011

http://funairsoftteam.forumgratuit.org
Liazard a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Les boutons "Haut / Bas"

Message par Liazard Mar 26 Fév 2013 - 11:57

MERCI,MERCI,MERCI! I love you

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

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
Liazard

Liazard
*

Masculin
Messages : 42
Inscrit(e) le : 05/10/2011

http://funairsoftteam.forumgratuit.org
Liazard a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum