Les boutons "Haut / Bas"

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

Résolu Les boutons "Haut / Bas"

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

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

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. le 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.
# Tropactif #

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 le 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
*

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 le 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
*

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 le Mar 26 Fév 2013 - 0:52

Bonjour,

Vous devez appliquer le css du tuto http://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
+ Hyperactif +

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

http://gilles570.forumactif.info/
Automne a été remercié(e) par l'auteur de ce sujet.

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

Message par Liazard le 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
*

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 le 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
*

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


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