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

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

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

Message par tristantheb le Lun 30 Juil 2012 - 16:55

CE SUJET EST résolu

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 Wink

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


Dernière édition par tristantheb le Ven 10 Aoû 2012 - 20:00, édité 5 fois (Raison : Nouvelle infos)

tristantheb
**

Masculin
Messages : 82
Inscrit(e) le : 22/03/2012

http://habbsite.alterviste.org/site/
tristantheb a été remercié(e) par l'auteur de ce sujet.

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

Message par tristantheb le Mar 31 Juil 2012 - 17:46

Up, mais svp, c'est urgent !

tristantheb
**

Masculin
Messages : 82
Inscrit(e) le : 22/03/2012

http://habbsite.alterviste.org/site/
tristantheb a été remercié(e) par l'auteur de ce sujet.

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

Message par tristantheb le Mer 1 Aoû 2012 - 18:29

et encore un petit UP

tristantheb
**

Masculin
Messages : 82
Inscrit(e) le : 22/03/2012

http://habbsite.alterviste.org/site/
tristantheb a été remercié(e) par l'auteur de ce sujet.

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

Message par tristantheb le Jeu 2 Aoû 2012 - 19:11

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

tristantheb
**

Masculin
Messages : 82
Inscrit(e) le : 22/03/2012

http://habbsite.alterviste.org/site/
tristantheb a été remercié(e) par l'auteur de ce sujet.

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

Message par tristantheb le Ven 3 Aoû 2012 - 14:40

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

tristantheb
**

Masculin
Messages : 82
Inscrit(e) le : 22/03/2012

http://habbsite.alterviste.org/site/
tristantheb a été remercié(e) par l'auteur de ce sujet.

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

Message par tristantheb le Lun 6 Aoû 2012 - 16:31

UP Sad

tristantheb
**

Masculin
Messages : 82
Inscrit(e) le : 22/03/2012

http://habbsite.alterviste.org/site/
tristantheb a été remercié(e) par l'auteur de ce sujet.

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

Message par tristantheb le Mar 7 Aoû 2012 - 18:14

UP pour là 6ième fois

tristantheb
**

Masculin
Messages : 82
Inscrit(e) le : 22/03/2012

http://habbsite.alterviste.org/site/
tristantheb a été remercié(e) par l'auteur de ce sujet.

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

Message par tristantheb le Mer 8 Aoû 2012 - 15:32

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 en cours d'attente d'une aide précieuse et il n'y à aucun Tuto 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 Astuce ou un Tuto qui fonctionne ce serait gentils.

Thanks pour ceux qui répondrons.

tristantheb
**

Masculin
Messages : 82
Inscrit(e) le : 22/03/2012

http://habbsite.alterviste.org/site/
tristantheb a été remercié(e) par l'auteur de ce sujet.

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

Message par tristantheb le Jeu 9 Aoû 2012 - 16:26

Up pour la 8iè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.


Dernière édition par tristantheb le Jeu 9 Aoû 2012 - 21:36, édité 1 fois (Raison : Ajout des infos de la réunion faites avec mon co-admin.)

tristantheb
**

Masculin
Messages : 82
Inscrit(e) le : 22/03/2012

http://habbsite.alterviste.org/site/
tristantheb a été remercié(e) par l'auteur de ce sujet.
  • 0

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

Message par Alex Fowl le Jeu 9 Aoû 2012 - 16:30

Bonjour,

Vous parlez de ce code ? Smile
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,

Alex Fowl
+ Hyperactif +

Masculin
Messages : 7557
Inscrit(e) le : 28/03/2009

http://www.aidactif.fr
Alex Fowl a été remercié(e) par l'auteur de ce sujet.

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

Message par tristantheb le Jeu 9 Aoû 2012 - 21:26

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 +)

tristantheb
**

Masculin
Messages : 82
Inscrit(e) le : 22/03/2012

http://habbsite.alterviste.org/site/
tristantheb a été remercié(e) par l'auteur de ce sujet.

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

Message par Alex Fowl le Jeu 9 Aoû 2012 - 21:33

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

Cordialement,

Alex Fowl
+ Hyperactif +

Masculin
Messages : 7557
Inscrit(e) le : 28/03/2009

http://www.aidactif.fr
Alex Fowl a été remercié(e) par l'auteur de ce sujet.

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

Message par tristantheb le Jeu 9 Aoû 2012 - 21:40

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,

tristantheb
**

Masculin
Messages : 82
Inscrit(e) le : 22/03/2012

http://habbsite.alterviste.org/site/
tristantheb a été remercié(e) par l'auteur de ce sujet.

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

Message par Alex Fowl le Jeu 9 Aoû 2012 - 22:12

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

Cordialement,

Alex Fowl
+ Hyperactif +

Masculin
Messages : 7557
Inscrit(e) le : 28/03/2009

http://www.aidactif.fr
Alex Fowl a été remercié(e) par l'auteur de ce sujet.

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

Message par tristantheb le Jeu 9 Aoû 2012 - 22:25

ç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

tristantheb
**

Masculin
Messages : 82
Inscrit(e) le : 22/03/2012

http://habbsite.alterviste.org/site/
tristantheb a été remercié(e) par l'auteur de ce sujet.

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

Message par Alex Fowl le Jeu 9 Aoû 2012 - 22:45

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 ! Smile

Cordialement,

Alex Fowl
+ Hyperactif +

Masculin
Messages : 7557
Inscrit(e) le : 28/03/2009

http://www.aidactif.fr
Alex Fowl a été remercié(e) par l'auteur de ce sujet.

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

Message par tristantheb le Jeu 9 Aoû 2012 - 22:46

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

tristantheb
**

Masculin
Messages : 82
Inscrit(e) le : 22/03/2012

http://habbsite.alterviste.org/site/
tristantheb a été remercié(e) par l'auteur de ce sujet.

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

Message par Alex Fowl le Jeu 9 Aoû 2012 - 23:38

Je ne vois pas le problème ? Smile


Cordialement,

Alex Fowl
+ Hyperactif +

Masculin
Messages : 7557
Inscrit(e) le : 28/03/2009

http://www.aidactif.fr
Alex Fowl a été remercié(e) par l'auteur de ce sujet.

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

Message par tristantheb le Ven 10 Aoû 2012 - 11:11

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

Mon Co-Admin a écrit: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

Mon Co-Admin a écrit: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

tristantheb
**

Masculin
Messages : 82
Inscrit(e) le : 22/03/2012

http://habbsite.alterviste.org/site/
tristantheb a été remercié(e) par l'auteur de ce sujet.
  • 0

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

Message par marc2010u le Ven 10 Aoû 2012 - 17:24

Salut tristantheb,

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

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

marc2010u
Nouveau membre

Masculin
Messages : 7
Inscrit(e) le : 22/07/2012

http://forumdetest.forums-gratuits.fr/
marc2010u a été remercié(e) par l'auteur de ce sujet.

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

Message par tristantheb le Ven 10 Aoû 2012 - 17:27

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. Neutral

tristantheb
**

Masculin
Messages : 82
Inscrit(e) le : 22/03/2012

http://habbsite.alterviste.org/site/
tristantheb a été remercié(e) par l'auteur de ce sujet.

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

Message par marc2010u le Ven 10 Aoû 2012 - 17:31

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



Cordialement, marc2010u de Habbo Radio

marc2010u
Nouveau membre

Masculin
Messages : 7
Inscrit(e) le : 22/07/2012

http://forumdetest.forums-gratuits.fr/
marc2010u a été remercié(e) par l'auteur de ce sujet.

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

Message par tristantheb le Ven 10 Aoû 2012 - 17:32

Ok marc2010u.

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

tristantheb
**

Masculin
Messages : 82
Inscrit(e) le : 22/03/2012

http://habbsite.alterviste.org/site/
tristantheb a été remercié(e) par l'auteur de ce sujet.
  • 0

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

Message par Alex Fowl le Ven 10 Aoû 2012 - 17:42

Rajoutez cette partie dans votre css :
Code:
.slide_recrutement {
position:absolute;
}

Cordialement,

Alex Fowl
+ Hyperactif +

Masculin
Messages : 7557
Inscrit(e) le : 28/03/2009

http://www.aidactif.fr
Alex Fowl a été remercié(e) par l'auteur de ce sujet.

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

Message par tristantheb le Ven 10 Aoû 2012 - 18:00

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 résolu

tristantheb
**

Masculin
Messages : 82
Inscrit(e) le : 22/03/2012

http://habbsite.alterviste.org/site/
tristantheb a été remercié(e) par l'auteur de ce sujet.

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

Message par tristantheb le Ven 10 Aoû 2012 - 19:03

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.

tristantheb
**

Masculin
Messages : 82
Inscrit(e) le : 22/03/2012

http://habbsite.alterviste.org/site/
tristantheb a été remercié(e) par l'auteur de ce sujet.
  • 0

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

Message par Alex Fowl le Ven 10 Aoû 2012 - 19:20

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,

Alex Fowl
+ Hyperactif +

Masculin
Messages : 7557
Inscrit(e) le : 28/03/2009

http://www.aidactif.fr
Alex Fowl a été remercié(e) par l'auteur de ce sujet.

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

Message par tristantheb le Ven 10 Aoû 2012 - 20:00

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

résolu

tristantheb
**

Masculin
Messages : 82
Inscrit(e) le : 22/03/2012

http://habbsite.alterviste.org/site/
tristantheb 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