Imbriquer une image qui s'active au passage de la souris dans le menu accordéon

[tristantheb]

CE SUJET EST

Bonjour, j'aimerais faire en sorte que ces deux images :

Image 1 :


Image 2 :


Je veux que quand on passe la souris dessus, l'image 1 passe en image 2, et que le résultat apparaissent sur le menu accordéon sur le données suivantes : (rangé comme suit : x1,y1,x2,y2) ----> 585,238,720,292
Bien-sûr, si je demande ça c'est car je veut faire des lien avec images réactives changeantes sur mon menu accordéon.
(Actuellement j'ajoute dans l'image un bouton qui ne change pas mais qui fait aller vers le lien et c'est pour ça que je vous demande un codage, pour éviter que j'ajoute le bouton dans l'image mais desus quand je ve que l'image soit à lien)

Voici le code actuel du menu accordéon :

Code:

        <center><div id="accordeon-pa" class="accordion">
            <ol>
                <li>
                    <h2><span>Recrutement</span></h2>
                    <div>
                      <figure>
                        <img usemap="#recrutement" src="http://img690.imageshack.us/img690/7637/recrutement.gif" width="759" height="300" border="0">
<map name="recrutement">
<area shape="rect" title="Lire la suite" coords="585,238,720,292" href="http://habbo-et-retros-disc.forumgratuit.org/t2-comment-etre-recrute">
                        </map>
                      </figure>
                    </div>
                </li>
                <li>
                    <h2><span>Offre spécial</span></h2>
                    <div>
                      <figure>
                        <img usemap="#offrespecial" src="http://img208.imageshack.us/img208/6958/editionlimitvip.gif" width="759" height="300" border="0">
<map name="offrespecial">
<area shape="rect" title="Lire la suite" coords="585,238,720,292" href="http://habbo-et-retros-disc.forumgratuit.org/t113-jour-vip-a-ganger">
                        </map>
                      </figure>
                    </div>
                </li>
                <li>
                    <h2><span>Concours</span></h2>
                    <div>
                      <figure>
                        <img usemap="#concours" src="http://img560.imageshack.us/img560/1705/82942438.gif" width="759" height="300" border="0">
<map name="concours">
<area shape="rect" title="Lire la suite" coords="585,238,720,292" href="http://habbo-et-retros-disc.forumgratuit.org/t112-concours-de-l-ete">
                        </map>
                      </figure>
                    </div>
                </li>
                <li>
                    <h2><span>Ça va commencer</span></h2>
                    <div>
                      <figure>
                        <img usemap="#çavacommencer" src="http://img98.imageshack.us/img98/7669/lespectaclevacommencer.gif" width="759" height="300" border="0">
<map name="çavacommencer">
<area shape="rect" title="TITRE" coords="585,238,720,292" href="http://habbo-et-retros-disc.forumgratuit.org/t112-concours-de-l-ete#178">
                        </map>
                      </figure>
                    </div>
                </li>
                <li>
                    <h2><span></span></h2>
                    <div>
                      <figure>
                        <img usemap="#vide2" src="http://img443.imageshack.us/img443/9759/actualitvide.gif" width="759" height="300" border="0">
<map name="vide2">
<area shape="rect" title="TITRE" coords="585,238,720,292" href="LIEN POUR L'IMAGE">
                        </map>
                      </figure>
                    </div>
                </li>
            </ol>
        </div></center>

Merci pour ceux qui répondrons

(Si ils vous faut des informations en supplément dites le moi)

[tristantheb]

Up, mais svp, c'est urgent !

[tristantheb]

et encore un petit UP

[tristantheb]

UP n°3, je commence à désepérer

[tristantheb]

je Up maintenant car ce soir j'aurais pas le temps de le faire

[tristantheb]

UP

[tristantheb]

UP pour là 6^ième fois

[tristantheb]

Je UP de nouveau et avant les 24h de l’existence de l'autre message (dsl mais quand on à pas le choix) car j'ai du gros travail en HTML qui m'attend pour un nouveau règlement du forum, mais j'aimerais quand même, que quelqu'un me dise comment faire pour le problème que je vous expose dans le premier cadre du sujet.

Je suis d'attente d'une aide précieuse et il n'y à aucun qui existe pour mon problème et mes recherche sur internet on été décevante pour le moment.
Si quelqu'un pouvais me donner une ou un qui fonctionne ce serait gentils.

:thanks: pour ceux qui répondrons.

[tristantheb]

Up pour la 8^ième fois, mais je continue d'espérer car avec mon co-admin nous avons décidé d’abandonner ce sujet si nous ne recevons pas le codage voulu d'ici le 31 Août car nous avons d'autres travaux qui nous attendent.

[Alex Fowl]

Bonjour,

Vous parlez de ce code ?

Code:

<img border="0" src="http://img17.imageshack.us/img17/5017/zbouton1.gif" onmouseover="this.src='http://img14.imageshack.us/img14/2721/zbouton2.gif';" onmouseout="this.src='http://img17.imageshack.us/img17/5017/zbouton1.gif';" width="136" height="55"></img>

Cordialement,

[tristantheb]

Oui, mais ce serais pour le placer sur un endroit spécial :
Sur cette image (voir ci-dessous) il y a un bouton dessiné directement dessus et j'aimerais mettre un boutons changeant à la place de faire un dessin sur mon image.


(Attention, la durée d'affichage de l'image n'est pas déterminé, elle peut ne plus être publié dans 1 mois ou +)

[Alex Fowl]

Pourriez-vous me fournir le code javascript et css utilisé pour ce slider pour le reproduire et faire des tests ?

Cordialement,

[tristantheb]

JavaScript du menu :

Code:

$(document).ready(function() {
          $("#accordeon-pa").each(function(){
            $(this).liteAccordion({
              autoPlay:true,
              pauseOnHover:true,
              rounded:true,
              enumerateSlides:true,
              containerWidth: 1007,
              containerHeight: 305
            })
          });
        });
        /*************************************************!
        *
        *  project:    liteAccordion - a horizontal accordion plugin for jQuery
        *  author:    Nicola Hibbert
        *  url:        http://nicolahibbert.com/liteaccordion-v2/
        *  demo:      http://www.nicolahibbert.com/demo/liteAccordion/
        *
        *  Version:    2.0.2
        *  Copyright:  (c) 2010-2011 Nicola Hibbert
        *  Licence:    MIT
        *
        **************************************************/
        (function(b){var a=function(g,l){var i={headerWidth:48,activateOn:"click",firstSlide:1,slideSpeed:800,onTriggerSlide:function(){},onSlideAnimComplete:function(){},autoPlay:false,pauseOnHover:false,cycleSpeed:6000,easing:"swing",theme:"basic",rounded:false,enumerateSlides:false,linkable:false},h=b.extend({},i,l),c=g.children("ol").children("li"),j=c.children(":first-child"),k=c.length,f=h.containerWidth-k*h.headerWidth,e={play:function(m){var n=d.nextSlide(m&&m);if(d.playing){return}d.playing=setInterval(function(){j.eq(n()).trigger("click.liteAccordion")},h.cycleSpeed)},stop:function(){clearInterval(d.playing);d.playing=0},next:function(){e.stop();j.eq(d.currentSlide===k-1?0:d.currentSlide+1).trigger("click.liteAccordion")},prev:function(){e.stop();j.eq(d.currentSlide-1).trigger("click.liteAccordion")},destroy:function(){e.stop();b(window).unbind(".liteAccordion");g.attr("style","").removeClass("accordion basic dark light stitch").removeData("liteAccordion").unbind(".liteAccordion").find("li > :first-child").unbind(".liteAccordion").filter(".selected").removeClass("selected").end().find("b").remove();c.removeClass("slide").children().attr("style","")},debug:function(){return{elem:g,defaults:i,settings:h,methods:e,core:d}}},d={setStyles:function(){g.width(h.containerWidth).height(h.containerHeight).addClass("accordion").addClass(h.rounded&&"rounded").addClass(h.theme);c.addClass("slide").children(":first-child").width(h.containerHeight).height(h.headerWidth).eq(h.firstSlide-1).addClass("selected");j.each(function(m){var p=b(this),o=m*h.headerWidth,n=j.first().next(),q=parseInt(n.css("marginLeft"),10)||parseInt(n.css("marginRight"),10)||0;if(m>=h.firstSlide){o+=f}p.css("left",o).next().width(f-q).css({left:o,paddingLeft:h.headerWidth});h.enumerateSlides&&p.append("<b>"+(m+1)+"</b>")})},bindEvents:function(){if(h.activateOn==="click"){j.bind("click.liteAccordion",d.triggerSlide)}else{if(h.activateOn==="mouseover"){j.bind({"mouseover.liteAccordion":d.triggerSlide,"click.liteAccordion":d.triggerSlide})}}if(h.pauseOnHover&&h.autoPlay){g.bind("mouseover.liteAccordion",function(){d.playing&&e.stop()}).bind("mouseout.liteAccordion",function(){!d.playing&&e.play(d.currentSlide)})}},linkable:function(){var m=(function(){var o=[];c.each(function(){if(b(this).attr("name")){o.push((b(this).attr("name")).toLowerCase())}});return m=o})();var n=function(p){var o;if(p.type==="load"&&!window.location.hash){return}if(p.type==="hashchange"&&d.playing){return}o=b.inArray((window.location.hash.slice(1)).toLowerCase(),m);if(o>-1&&o<m.length){j.eq(o).trigger("click.liteAccordion")}};b(window).bind({"hashchange.liteAccordion":n,"load.liteAccordion":n})},currentSlide:h.firstSlide-1,nextSlide:function(m){var n=m+1||d.currentSlide+1;return function(){return n++%k}},playing:0,animSlideGroup:function(m,o,n){var p=n?":lt("+(m+1)+")":":gt("+m+")";c.filter(p).each(function(){var r=b(this),q=c.index(r);r.children().stop(true).animate({left:(n?0:f)+q*h.headerWidth},h.slideSpeed,h.easing,function(){if(!d.slideAnimCompleteFlag){h.onSlideAnimComplete.call(o);d.slideAnimCompleteFlag=true}})})},slideAnimCompleteFlag:false,triggerSlide:function(p){var o=b(this),m=j.index(o),n=o.next();d.currentSlide=m;d.slideAnimCompleteFlag=false;j.removeClass("selected").filter(o).addClass("selected");if(p.originalEvent&&h.autoPlay){e.stop();e.play(m)}if(h.linkable&&!d.playing){window.location.hash=o.parent().attr("name")}h.onTriggerSlide.call(n);d.animSlideGroup(m,n,true);d.animSlideGroup(m,n)},ieClass:function(){var m=+(b.browser.version).charAt(0);if(m<7){e.destroy()}if(m===7||m===8){c.each(function(n){b(this).addClass("slide-"+n)})}g.addClass("ie ie"+m)},init:function(){if(b.browser.msie){d.ieClass()}d.setStyles();d.bindEvents();if(h.cycleSpeed<h.slideSpeed){h.cycleSpeed=h.slideSpeed}if(h.linkable&&"onhashchange" in window){d.linkable()}h.autoPlay&&e.play()}};d.init();return e};b.fn.liteAccordion=function(e){var d=this,c=d.data("liteAccordion");if(typeof e==="object"||!e){return d.each(function(){var f;if(c){return}f=new a(d,e);d.data("liteAccordion",f)})}else{if(typeof e==="string"&&c[e]){if(e==="debug"){return c[e].call(d)}else{c[e].call(d);return d}}}}})(jQuery);

Code CSS du menu:

Code:

@charset 'utf-8';
/*************************************************!
*
*  project:    liteAccordion - a horizontal accordion plugin for jQuery
*  author:    Nicola Hibbert
*  url:        http://nicolahibbert.com/liteaccordion-v2/
*  demo:      http://www.nicolahibbert.com/demo/liteAccordion/
*
*  Version:    2.0.2
*  Copyright:  (c) 2010-2011 Nicola Hibbert
*  Licence:    MIT
*
**************************************************/
/****************************************** Core */
.accordion { text-align: left; font: 'Helvetica Neue', Verdana, Arial, sans-serif }
.accordion > ol { position: relative; overflow: hidden; height: 100%; margin: 0; padding: 0; list-style-type: none }
.accordion .slide > h2 {
  color: black;
    font-size: 16px; 
  font-weight: normal;
  margin: 0;
  z-index: 100;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: translateX(-100%) rotate(-90deg);
  -webkit-transform-origin: right top;
  -moz-transform: translateX(-100%) rotate(-90deg);
  -moz-transform-origin: right top;
  -o-transform: translateX(-100%) rotate(-90deg);
  -o-transform-origin: right top;
  transform: translateX(-100%) rotate(-90deg);
  transform-origin: right top;
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.accordion .slide > h2 span {
    display: block;
    padding-right: 8%;
    text-align: right;
    height: 90%;
    margin-top: 5px;
    -moz-user-select: none;
    -khtml-user-select: none;
    user-select: none;
}
.accordion .slide > h2 b {
    display: inline-block;
    position: absolute;
    top: 13%;
    left: 10%;
    text-align: center;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
.accordion .slide > h2:hover { cursor: pointer }
.accordion .slide > div { height: 100%; position: absolute; top: 0; z-index: 10; overflow: hidden; background: white }
.accordion noscript p { padding: 10px; margin: 0; background: white }

/****************************************** Dark */
.accordion {
    border: 9px solid #353535;
    border-bottom-width: 8px;
    padding: 5px 5px 6px 0;
    background: #030303;
    -webkit-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
    -ms-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
    -o-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
  box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
}
.accordion .slide > h2 { background: #030303; text-shadow: 0 -1px 0 #030303; line-height: 265% }
.accordion .slide > h2 span { background: #353535; color: white }
.accordion .slide > h2 b { background: #353535; color: #030303; text-shadow: -1px 1px 0 #5b5b5b }
.accordion .slide > h2.selected span, .accordion .slide > h2.selected span:hover {
    background: #353535;
    background: -moz-linear-gradient(left,  #353535 0%, #555555 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#353535), color-stop(100%,#555555));
    background: -webkit-linear-gradient(left,  #353535 0%,#555555 100%);
    background: -o-linear-gradient(left,  #353535 0%,#555555 100%);
    background: -ms-linear-gradient(left,  #353535 0%,#555555 100%);
    background: linear-gradient(left,  #353535 0%,#555555 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#353535', endColorstr='#555555',GradientType=1 );
}
.accordion .slide > h2.selected b {
    background: #383838;
    background: -moz-linear-gradient(top,  #3a3a3a 0%, #363636 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3a3a3a), color-stop(100%,#363636));
    background: -webkit-linear-gradient(top,  #3a3a3a 0%,#363636 100%);
    background: -o-linear-gradient(top,  #3a3a3a 0%,#363636 100%);
    background: -ms-linear-gradient(top,  #3a3a3a 0%,#363636 100%);
    background: linear-gradient(top,  #3a3a3a 0%,#363636 100%);
}
.accordion .slide > div { background: #030303; margin-left: 5px }

/*************************************** Rounded */
.rounded, .rounded > ol { -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; border-radius: 6px }
.rounded .slide > h2 span { -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px }

/******************************************** IE */
.ie .slide > h2 b { top: 42%; left: 5% }
.ie9 .slide > h2 { filter: none; -ms-transform: translateX(-100%) rotate(-90deg); -ms-transform-origin: right top }
.ie.accordion .slide > h2 b { top: 44% }
.ie9.accordion .slide > h2.selected span, .ie9.accordion .slide > h2.selected span:hover { filter: none }

/******************************************** FA */
.accordion figure .full { width: 100%; height: 100%; }
.accordion h2 { border: none; }

/* centrer l'accordéon */
.accordion { margin: auto; }

Code HTML utilisé dans généralité en ce moment :

Code:

        <center><div id="accordeon-pa" class="accordion">
            <ol>
                <li>
                    <h2><span>Recrutement</span></h2>
                    <div>
                      <figure>
                        <img usemap="#recrutement" src="http://img19.imageshack.us/img19/5844/recrutementr.gif" width="759" height="300" border="0">
<map name="recrutement">
<area shape="rect" title="Lire la suite" coords="585,238,720,292" href="http://habbo-et-retros-disc.forumgratuit.org/t2-comment-etre-recrute">
                        </map>
                      </figure>
                    </div>
                </li>
                <li>
                    <h2><span></span></h2>
                    <div>
                      <figure>
                        <img usemap="#TITRE" src="http://img443.imageshack.us/img443/9759/actualitvide.gif" width="759" height="300" border="0">
                        <map name="TITRE">
                        <area shape="rect" title="TITRE" coords="x1,y1,x2,y2" href="LIEN POUR L'IMAGE">
                        </map>
                      </figure>
                    </div>
                </li>
                <li>
                    <h2><span></span></h2>
                    <div>
                      <figure>
                        <img usemap="#TITRE" src="http://img443.imageshack.us/img443/9759/actualitvide.gif" width="759" height="300" border="0">
                        <map name="TITRE">
                        <area shape="rect" title="TITRE" coords="x1,y1,x2,y2" href="LIEN POUR L'IMAGE">
                        </map>
                      </figure>
                    </div>
                </li>
                <li>
                    <h2><span></span></h2>
                    <div>
                      <figure>
                        <img usemap="#TITRE" src="http://img443.imageshack.us/img443/9759/actualitvide.gif" width="759" height="300" border="0">
                        <map name="TITRE">
                        <area shape="rect" title="TITRE" coords="x1,y1,x2,y2" href="LIEN POUR L'IMAGE">
                        </map>
                      </figure>
                    </div>
                </li>
                <li>
                    <h2><span></span></h2>
                    <div>
                      <figure>
                        <img usemap="#TITRE" src="http://img443.imageshack.us/img443/9759/actualitvide.gif" width="759" height="300" border="0">
                        <map name="TITRE">
                        <area shape="rect" title="TITRE" coords="x1,y1,x2,y2" href="LIEN POUR L'IMAGE">
                        </map>
                      </figure>
                    </div>
                </li>
            </ol>
        </div></center>

Merci de vous être proposé, voici les codes + celui en HTML qui est placé dans : "Généralités" et un Widget de mon portail.

Cordialement,

[Alex Fowl]

Alors, ce code html :

Code:

        <center><div id="accordeon-pa" class="accordion">
            <ol>
                <li>
                    <h2><span>Recrutement</span></h2>
                    <div>
                      <figure>
                        <img src="http://img19.imageshack.us/img19/5844/recrutementr.gif" width="759" height="300" border="0" />
                     <a title="Lire la suite" href="http://habbo-et-retros-disc.forumgratuit.org/t2-comment-etre-recrute">
                        <img class="slide_recrutement" border="0" src="http://img17.imageshack.us/img17/5017/zbouton1.gif"  onmouseover="this.src='http://img14.imageshack.us/img14/2721/zbouton2.gif';" onmouseout="this.src='http://img17.imageshack.us/img17/5017/zbouton1.gif';" width="136" height="55"></img>
                     </a>
                      </figure>
                    </div>
                </li>
                <li>
                    <h2><span></span></h2>
                    <div>
                      <figure>
                        <img usemap="#TITRE" src="http://img443.imageshack.us/img443/9759/actualitvide.gif" width="759" height="300" border="0">
                        <map name="TITRE">
                        <area shape="rect" title="TITRE" coords="x1,y1,x2,y2" href="LIEN POUR L'IMAGE">
                        </map>
                      </figure>
                    </div>
                </li>
                <li>
                    <h2><span></span></h2>
                    <div>
                      <figure>
                        <img usemap="#TITRE" src="http://img443.imageshack.us/img443/9759/actualitvide.gif" width="759" height="300" border="0">
                        <map name="TITRE">
                        <area shape="rect" title="TITRE" coords="x1,y1,x2,y2" href="LIEN POUR L'IMAGE">
                        </map>
                      </figure>
                    </div>
                </li>
                <li>
                    <h2><span></span></h2>
                    <div>
                      <figure>
                        <img usemap="#TITRE" src="http://img443.imageshack.us/img443/9759/actualitvide.gif" width="759" height="300" border="0">
                        <map name="TITRE">
                        <area shape="rect" title="TITRE" coords="x1,y1,x2,y2" href="LIEN POUR L'IMAGE">
                        </map>
                      </figure>
                    </div>
                </li>
                <li>
                    <h2><span></span></h2>
                    <div>
                      <figure>
                        <img usemap="#TITRE" src="http://img443.imageshack.us/img443/9759/actualitvide.gif" width="759" height="300" border="0">
                        <map name="TITRE">
                        <area shape="rect" title="TITRE" coords="x1,y1,x2,y2" href="LIEN POUR L'IMAGE">
                        </map>
                      </figure>
                    </div>
                </li>
            </ol>
        </div></center>

Et ce code css à rajouter :

Code:

.slide_recrutement {
margin-top:-60px;
margin-left:600px;
}

Cordialement,

[tristantheb]

ça fonctionne, mais j'arrive pas à mettre le bouton dessus l'ancien.

Code:

        .slide_recrutement {
        margin-top:-60px;
        margin-left:585px;
        }

Le margin-top je ne sais pas le régler mais le margin-left lui est bien réglé sur le codage ci-dessus

[Alex Fowl]

Il ne pourra pas être parfaitement sur l'image, je vous conseille de modifier justement l'image de fond et d'en mettre une sans le bouton !

Cordialement,

[tristantheb]

le problème, c'est que le bouton touche le bas du menu accordéon.

Je ne serais disponible demain matin pour voir votre réponse, merci.

Cordialement, tristantheb

[Alex Fowl]

Je ne vois pas le problème ?


Cordialement,

[tristantheb]

Ben moi si, je peut voir un problème même quand je ne suis pas connecté à mon forum.



à moins que Firefox ne prend pas en compte les margin-top et ça me cause ce problème.

J'ai demandé à Frank201 qui est mon co-admin de me faire un rapport et ce matin il à publié ça pendant que j'étais sur FdF

Après installation du codage, nous avons constaté que cela fonctionnais correctement sur Google Chrome et non sur Firefox, nous allons voir sur Internet Explorer.

_________________
Cordialement, Frank201

Après un test j'ai pus conclure que internet explorer avais le meêm problème mais, le bouton est quand même quelque pixels plus haut.

_________________
Cordialement, Frank201

[marc2010u]

Salut tristantheb,

J'ai une idée pour ton code CSS pour Internet 9:

Code:

.ie9 .slide_recrutement {
margin-top:-60px;
margin-left:585px;
}

[tristantheb]

Non dsl, je l'ai déjà tenté dans l'après-midi, mais rien n'y fait, ça bug 2 fois plus le bouton.

[marc2010u]

Ha, dsl, jesavais pas. On se retrouve dimanche pour un Habbo Radio

---

Cordialement, marc2010u de Habbo Radio

[tristantheb]

Ok marc2010u.

Mais est-ce que quelqu'un pourrais me donner un donne pour que ça fonctionne sur IE9 et Mozillia FireFox

[Alex Fowl]

Rajoutez cette partie dans votre css :

Code:

.slide_recrutement {
position:absolute;
}

Cordialement,

[tristantheb]

Merci, ça fonctionne, et j'ai compris comment reproduire le code pour mes autres actus, merci de m'avoir aidé.

Voilà le résultat si j’assemble les deux codes données :

Code:

.slide_recrutement {
margin-top:-60px;
margin-left:585px;
position:absolute;
}

Merci, grâce à vous mon problème est

[tristantheb]

Dsl pour le double post, mais j'ai mis les boutons finaux pour les lien, le problème c'est que le bouton deux reste affiché quand on retire la souris de dessus.

Code HTML Actuel :

Code:

                <center><div id="accordeon-pa" class="accordion">
                    <ol>
                        <li>
                            <h2><span>Recrutement</span></h2>
                            <div>
                              <figure>
                                <img src="http://img42.imageshack.us/img42/3622/recrutementc.gif" width="759" height="300" border="0" />
                            <a title="Lire la suite" href="http://habbo-et-retros-disc.forumgratuit.org/t2-comment-etre-recrute">
                                <img class="slide_recrutement" border="0" src="http://img268.imageshack.us/img268/5017/zbouton1.gif" onmouseover="this.src='http://img221.imageshack.us/img221/2721/zbouton2.gif';" onmouseout="http://img268.imageshack.us/img268/5017/zbouton1.gif';" width="139" height="58"></img>
                            </a>
                              </figure>
                            </div>
                        </li>
                        <li>
                            <h2><span>Menu</span></h2>
                            <div>
                              <figure>
                                <img src="http://img843.imageshack.us/img843/4609/menuaccordonv18.gif" width="759" height="300" border="0" />
                            <a title="Lire la suite" href="http://habbo-et-retros-disc.forumgratuit.org/t131-menu-accordeon-les-travaux-continuents#226">
                                <img class="slide_menu" border="0" src="http://img268.imageshack.us/img268/5017/zbouton1.gif" onmouseover="this.src='http://img221.imageshack.us/img221/2721/zbouton2.gif';" onmouseout="http://img268.imageshack.us/img268/5017/zbouton1.gif';" width="139" height="58"></img>
                            </a>
                              </figure>
                            </div>
                        </li>
                        <li>
                            <h2><span></span></h2>
                            <div>
                              <figure>
                                <img src="http://img443.imageshack.us/img443/9759/actualitvide.gif" width="759" height="300" border="0" />
                              </figure>
                            </div>
                        </li>
                        <li>
                            <h2><span></span></h2>
                            <div>
                              <figure>
                                <img src="http://img443.imageshack.us/img443/9759/actualitvide.gif" width="759" height="300" border="0" />
                              </figure>
                            </div>
                        </li>
                        <li>
                            <h2><span></span></h2>
                            <div>
                              <figure>
                                <img src="http://img443.imageshack.us/img443/9759/actualitvide.gif" width="759" height="300" border="0" />
                              </figure>
                            </div>
                        </li>
                    </ol>
                </div></center>

Merci pour la réponse que je recevrais.

[Alex Fowl]

J'ai corrigé votre code, vous aviez supprimé une partie :

Code:

                <center><div id="accordeon-pa" class="accordion">
                    <ol>
                        <li>
                            <h2><span>Recrutement</span></h2>
                            <div>
                              <figure>
                                <img src="http://img42.imageshack.us/img42/3622/recrutementc.gif" width="759" height="300" border="0" />
                            <a title="Lire la suite" href="http://habbo-et-retros-disc.forumgratuit.org/t2-comment-etre-recrute">
                        <img class="slide_recrutement" border="0" src="http://img221.imageshack.us/img221/2721/zbouton2.gif" onmouseover="this.src='http://img221.imageshack.us/img221/2721/zbouton2.gif';" onmouseout="this.src='http://img268.imageshack.us/img268/5017/zbouton1.gif';" width="139" height="58">
                            </a>
                              </figure>
                            </div>
                        </li>
                        <li>
                            <h2><span>Menu</span></h2>
                            <div>
                              <figure>
                                <img src="http://img843.imageshack.us/img843/4609/menuaccordonv18.gif" width="759" height="300" border="0" />
                            <a title="Lire la suite" href="http://habbo-et-retros-disc.forumgratuit.org/t131-menu-accordeon-les-travaux-continuents#226">
                        <img class="slide_recrutement" border="0" src="http://img221.imageshack.us/img221/2721/zbouton2.gif" onmouseover="this.src='http://img221.imageshack.us/img221/2721/zbouton2.gif';" onmouseout="this.src='http://img268.imageshack.us/img268/5017/zbouton1.gif';" width="139" height="58">
                            </a>
                              </figure>
                            </div>
                        </li>
                        <li>
                            <h2><span></span></h2>
                            <div>
                              <figure>
                                <img src="http://img443.imageshack.us/img443/9759/actualitvide.gif" width="759" height="300" border="0" />
                              </figure>
                            </div>
                        </li>
                        <li>
                            <h2><span></span></h2>
                            <div>
                              <figure>
                                <img src="http://img443.imageshack.us/img443/9759/actualitvide.gif" width="759" height="300" border="0" />
                              </figure>
                            </div>
                        </li>
                        <li>
                            <h2><span></span></h2>
                            <div>
                              <figure>
                                <img src="http://img443.imageshack.us/img443/9759/actualitvide.gif" width="759" height="300" border="0" />
                              </figure>
                            </div>
                        </li>
                    </ol>
                </div></center>

Cordialement,

[tristantheb]

Merci de votre aide, maintenant mon sujet peut être fermé.