Bouton en mouvement

2 participants

Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code

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

Résolu Bouton en mouvement

Message par ScorpionWorms Sam 31 Aoû 2013 - 15:40

Bonjour,

Je demande un petit coup de main concernant mon forum, pour ajouter des fonctionnalités dessus, j'ai "créé" des boutons/onglets qui permettent de se rediriger vers d'autres sites internet. Ces boutons à la forme rectangulaire sont placés sur la gauche du forum en page d'accueil. Un peu la même chose que les boutons twitter et facebook qu'il y a sur forumactif...
Il sont en partie cachés sur la gauche, car mon but est de les faire se déplacer vers la droite à l'approche de la souris, c'est notamment cette opération qui me pose problème, pendant un temps elle a très bien marché, mais ce n'est plus le cas Mad 

Si quelqu'un pouvait me proposer un solution Smile 

Les boutons apparaissent sous cette forme :
http://worms-uni67.monally.com/h3-onglets-maj

Voici le codage que j'ai utilisé :
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>Scorproduction</title>


<style>

ul#bouton {
position: fixed;    /* On fixe les boutons */
margin: 0px;        /*  marge extérieure */
padding: 0px;        /*  marge intérieure  */
top: 0px;          /* positionné à 50px du haut  */
left: 0px;          /* positionné à 0px du bord gauche */
list-style: none;    /* pas de style pour la liste */
z-index:9999;        /* place les boutons au dessus de tout le reste */
}

ul#bouton li {
width: 90px;          /* largeur du bouton */
margin-bottom: 4px;    /* marge inférieure */
}

ul#bouton li a {
display: block;      /* defini en bloc */
margin-left: -75px;  /* marge extérieure négative gauche */
width: 90px;          /* largeur */
height: 50px;          /* hauteur */
background-color: rgb(0, 0, 100, 0.5);  /* couleur de fond */
background-color: rgb(0, 0, 100, 0.5);
background-repeat:no-repeat;  /* répétition du fond */
background-position:center center;  /* position du fond */
background-position:center;  /* position du fond */
border-radius:0px 9px 9px 0px;        /* angles arrondis */
border:1px solid #323630;            /* bordure */
box-shadow: 0px 0px 5px #000;        /* ombre portée */
opacity: 1;                        /* opacité */
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60); /* opacité pour IE */
}



ul#bouton .ogame a{
    background-image: url(http://i70.servimg.com/u/f70/17/13/74/77/o10.gif);
}
ul#bouton .board a{
    background-image: url(http://i70.servimg.com/u/f70/17/13/74/77/o10.gif);
}
ul#bouton .warrider a{
    background-image: url(http://i70.servimg.com/u/f70/17/13/74/77/o10.gif);
}
ul#bouton .gamewinner a{
    background-image: url(http://i70.servimg.com/u/f70/17/13/74/77/o10.gif);
}
ul#bouton .speedsim a{
    background-image: url(http://i70.servimg.com/u/f70/17/13/74/77/o10.gif);
}
</style>

    </head>

    <body>

        <ul id="bouton">
 
          <li class="ogame"><a target="_blank" href="http://www.ogame.fr/"></a></li>
            <li class="board"><a target="_blank"href="http://board.ogame.fr/index.php?page=Index"></a></li>
            <li class="warrider"><a target="_blank" href="http://www.war-riders.de/?lang=fr&uni=67&page=search&post=1&type=ally&name=Worms"></a></li>
            <li class="gamewinner"><a target="_blank" href="http://www.gamewinner.fr/ogame-simulateur-combat.html"></a></li>
            <li class="speedsim"><a target="_blank" href="http://websim.speedsim.net/index.php?lang=fr"></a></li>
        </ul>

        <script type="text/javascript">
            $(function() {
                $('#bouton a').stop().animate({'marginLeft':'-75px'},1000);

                $('#bouton > li').hover(
                    function () {
                        $('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
                    },
                    function () {
                      $('a',$(this)).stop().animate({'marginLeft':'-75px'},200);
                    }
                );
            });
        </script>

  </body>
</html>
Je pose ensuite ce code dans Affichage>Généralités> Message d'accueil :

Code:
<iframe src="http://worms-uni67.monally.com/h3-onglets-maj"
style=
"
position: fixed;
top: 70px;
left: 0px;
background-color: transparent ! important;
height: 400px;  
width: auto;
border: none !important;
overflow: hidden ! important;
"
allowtransparency="true" scrolling="no" frameborder="no">
</iframe>
Je pense qu'il y a une erreur dans ces codages, mais je ne vois pas lesquelles Crying or Very sad 

Help Mr. Green


Dernière édition par ScorpionWorms le Sam 31 Aoû 2013 - 17:16, édité 1 fois
avatar

ScorpionWorms
Nouveau membre

Messages : 4
Inscrit(e) le : 31/08/2013

http://worms-uni67.monally.com/
ScorpionWorms a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bouton en mouvement

Message par Adam_sfp Sam 31 Aoû 2013 - 16:23

Bonjour

il faut mettre la librairie jquery dans votre code sur la page HTML
Après <head>
mettez
Code:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Cdt.
Adam_sfp

Adam_sfp
Membre actif

Masculin
Messages : 4465
Inscrit(e) le : 18/04/2008

http://antonyadam.kanak.fr
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Bouton en mouvement

Message par ScorpionWorms Sam 31 Aoû 2013 - 17:15

J'ai essayé, et çà marche, merci beaucoup Adam pour la rapidité et l'efficacité! Affirmatif 
avatar

ScorpionWorms
Nouveau membre

Messages : 4
Inscrit(e) le : 31/08/2013

http://worms-uni67.monally.com/
ScorpionWorms 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

Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code

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