Liens/images dans la marge de gauche (suite)

[gigiman1427]

Bonjour,
j'avais fais une manip sur mon forum avec l'aide de scipion, mais je ne retrouve plus ou j'ai coller le code

voila mon forum: http://boulangerieanas.forumegypt.net

j'ai regarder dans les pages javascript, et je n;'ai rien, et j'ai regarder dans les template modifier, je ne le trouve pas ?!? oO

pourtant tout fonctionne sur le site, moi je voudrait recopier la manip sur un autre forum.

le code etait: je viens de me rendre compte que ca doit etre un code different que j'utilise car ce code fait apparaitre les images d'une autre maniere

Code:

       jQuery(document).ready(function() { jQuery('body').append('<table cellspacing="0" cellpadding="0" style="position: fixed; top: 195px; left: 0px; z-index:10000;"><tr><td><div id="panneau" scrolling="no" style="  box-shadow: 0px 0px 0px #555; border-radius: 0 0px 0px 0; background-color: #3A261B; width: 128px; height: 260px; display: none;" marginwidth="0" marginheight="0" frameborder="0">
              
               <a href="http://sucreries-oumnawaiss.com/"><img src="https://dl.dropbox.com/u/70398165/Sites/Boulangerie/PUB/oumnawaiss.jpg"></a><br><br>
              
               <a href="http://madina-shop.com/fr/"><img src="https://dl.dropbox.com/u/70398165/Sites/Boulangerie/PUB/madina_shop.jpg"></a><br><br>
              
               <a href="http://www.123siteweb.fr/Tawba-Confection"><img src="https://dl.dropbox.com/u/70398165/Sites/Boulangerie/PUB/tawba_confection.jpg"></a><br><br>
              
               <a href="http://www.location-egypte.com/index.php"><img src="https://dl.dropbox.com/u/70398165/Sites/Boulangerie/PUB/bassim_home.jpg"></a>
              
             
             
                       </div></td><td style="vertical-align: middle;"><img src="https://dl.dropbox.com/u/70398165/Sites/Boulangerie/PUB/ouvrir.png" onmouseover="document.getElementById(\'panneau\').style.display=(this.src==\'https://dl.dropbox.com/u/70398165/Sites/Boulangerie/PUB/ouvrir.png\')?\'block\':\'none\';this.src=(this.src==\'https://dl.dropbox.com/u/70398165/Sites/Boulangerie/PUB/ouvrir.png\')?\'https://dl.dropbox.com/u/70398165/Sites/Boulangerie/PUB/ouvrir_transp.png\':\'https://dl.dropbox.com/u/70398165/Sites/Boulangerie/PUB/ouvrir.png\';"/></td></tr></table>'); } );

je n'ai retrouver que ce code dans mon CSS:

Code:

ul#bouton {
position: fixed; /* On fixe la position des boutons */
margin: 0px; /* marge extérieure */
padding: 0px; /* marge intérieure */
top: 50px; /* positionné à 50px du haut */
left: 0px; /* positionné à 0px du bord gauche */
list-style: none; /* pas de style pour la liste */
z-index: 999; /* 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; /* défini en bloc */
margin-left: 0px; /* marge extérieure négative gauche */
width: 128px; /* largeur */
height: 48px; /* hauteur */
background-color:#3A261B; /* couleur de fond */
background-repeat:no-repeat; /* répétition du fond */
background-position:center center; /* position du fond */
-moz-border-radius:0px 9px 9px 0px; /* angles arrondis */
-webkit-border-radius:0px 9px 9px 0px; /* angles arrondis */
border-radius:0px 9px 9px 0px; /* angles arrondis */
border:1px solid #323630; /* bordure */
-moz-box-shadow: 0px 0px 5px #000; /* ombre portée */
-webkit-box-shadow: 0px 0px 5px #000; /* ombre portée */
box-shadow: 0px 0px 5px #000; /* ombre portée */
opacity: 100; /* opacité */
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100); /* opacité pour IE */
}

ul#bouton .oumnawaiss a{
background-image: url(https://dl.dropbox.com/u/70398165/Sites/Boulangerie/PUB/oumnawaiss.jpg);
}
ul#bouton .madina_shop a{
background-image: url(https://dl.dropbox.com/u/70398165/Sites/Boulangerie/PUB/madina_shop.jpg);
}
ul#bouton .tawba_confection a{
background-image: url(https://dl.dropbox.com/u/70398165/Sites/Boulangerie/PUB/tawba_confection.jpg);
}
ul#bouton .bassim_home a{
background-image: url(https://dl.dropbox.com/u/70398165/Sites/Boulangerie/PUB/bassim_home.jpg);
}

[gigiman1427]

après avoir bien galéré, j'ai retrouvé le code
il était dans le template "overall_header"

le code peut servir a quelqu'un d'autre

Code:

<div id="page-body">
 <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
 <table cellpadding="0" cellspacing="0" width="100%" class="three-col">
 <tbody><ul id="bouton">
 
           <li class="nom01"><a href="Lien destinataire"></a></li>
            <li class="nom02"><a href="Lien destinataire"></a></li>
            <li class="nom03"><a href="Lien destinataire"></a></li>
            <li class="nom04"><a href="Lien destinataire"></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>

plus le css qui va avec

Code:

ul#bouton {
position: fixed; /* On fixe la position des boutons */
margin: 0px; /* marge extérieure */
padding: 0px; /* marge intérieure */
top: 50px; /* positionné à 50px du haut */
left: 0px; /* positionné à 0px du bord gauche */
list-style: none; /* pas de style pour la liste */
z-index: 999; /* 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; /* défini en bloc */
margin-left: 0px; /* marge extérieure négative gauche */
width: 128px; /* largeur */
height: 48px; /* hauteur */
background-color:#3A261B; /* couleur de fond */
background-repeat:no-repeat; /* répétition du fond */
background-position:center center; /* position du fond */
-moz-border-radius:0px 9px 9px 0px; /* angles arrondis */
-webkit-border-radius:0px 9px 9px 0px; /* angles arrondis */
border-radius:0px 9px 9px 0px; /* angles arrondis */
border:1px solid #323630; /* bordure */
-moz-box-shadow: 0px 0px 5px #000; /* ombre portée */
-webkit-box-shadow: 0px 0px 5px #000; /* ombre portée */
box-shadow: 0px 0px 5px #000; /* ombre portée */
opacity: 100; /* opacité */
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100); /* opacité pour IE */
}

ul#bouton .nom01 a{
background-image: url(Lien de l'image cliquable);
}
ul#bouton .nom02 a{
background-image: url(Lien de l'image cliquable);
}
ul#bouton .nom03 a{
background-image: url(Lien de l'image cliquable);
}
ul#bouton .nom04 a{
background-image: url(Lien de l'image cliquable);
}


résultat en image: