Liens/images dans la marge de gauche (suite)

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

Résolu Liens/images dans la marge de gauche (suite)

Message par gigiman1427 le Dim 5 Jan 2014 - 17:27

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


Dernière édition par gigiman1427 le Dim 5 Jan 2014 - 21:24, édité 2 fois (Raison : ajout d'info)

gigiman1427
***

Masculin
Messages : 192
Inscrit(e) le : 01/03/2013

http://www.hijra-egypte.com/
gigiman1427 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Liens/images dans la marge de gauche (suite)

Message par gigiman1427 le Dim 5 Jan 2014 - 21:05

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:

gigiman1427
***

Masculin
Messages : 192
Inscrit(e) le : 01/03/2013

http://www.hijra-egypte.com/
gigiman1427 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