Besoin d'aide sur mouseover et mouseout [Résolu]

jakols · 15/12/2010, 19h09

Bonjour à tous,

Je débute tout juste en jQuery, qui m'a été conseillé pour régler un pb de rollover, mais la je cale.

Voici mon script, qui fonctionne dans l'état mais auquel je souhaiterais ajouter des conditions. Et c'est là que je galère

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
 
jQuery(document).ready(function(){
/****************menus*****************/
  jQuery("#menu_cuisine").show(function(){
    jQuery("#left").fadeTo("slow",1);
    jQuery("#right").fadeTo("slow",0.10);
    jQuery("#salon").hide();
    jQuery("#cuisine").fadeTo("slow",1);
  }
 
  );
  jQuery("#menu_salon").show(function(){
    jQuery("#left").fadeTo("slow",0.10);
    jQuery("#right").fadeTo("slow",1);
    jQuery("#salon").fadeTo("slow",1);
    jQuery("#cuisine").hide();
  });
 
 
/****************over*****************/
  jQuery("#left").mouseover(function(){
    jQuery(this).fadeTo("slow",1);
    jQuery("#right").fadeTo("slow",0.10);
    jQuery("#salon").hide();
    jQuery("#cuisine").fadeTo("slow",1);
  });
 
 
  jQuery("#right").mouseover(function(){
    jQuery("#left").fadeTo("slow",0.10);
    jQuery(this).fadeTo("slow",1);
    jQuery("#right2").hide();
    jQuery("#salon").fadeTo("slow",1);
    jQuery("#cuisine").hide();
  });
 
 
/****************out******************/
jQuery("#left").mouseout(function(){
    jQuery(this).fadeTo("slow",0.10);
      jQuery("#right").fadeTo("slow",1);
      jQuery("#salon").fadeTo("slow",1);
      jQuery("#cuisine").hide();
 
  });
 
jQuery("#right").mouseout(function(){
      jQuery(this).fadeTo("slow",0.10);
      jQuery("#left").fadeTo("slow",1);
      jQuery("#salon").hide();
      jQuery("#cuisine").fadeTo("slow",1);
 });
 
});
</script>

Je voudrais que :

Lorsque le menu cuisine est affiché :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
jQuery("#menu_cuisine").show(function(){
    jQuery("#left").fadeTo("slow",1);
    jQuery("#right").fadeTo("slow",0.10);
    jQuery("#salon").hide();
    jQuery("#cuisine").fadeTo("slow",1);
  }

Lorsque le menu cuisine est affiché et que mouseover sur right alors :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
jQuery("#right").mouseover(function(){
    jQuery("#left").fadeTo("slow",0.10);
    jQuery(this).fadeTo("slow",1);
    jQuery("#salon").fadeTo("slow",1);
    jQuery("#cuisine").hide();
  });

Lorsque le menu cuisine est affiché et que mouseout sur right alors :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
jQuery("#right").mouseout(function(){
      jQuery(this).fadeTo("slow",0.10);
      jQuery("#left").fadeTo("slow",1);
      jQuery("#salon").hide();
      jQuery("#cuisine").fadeTo("slow",1);
 });

Lorsque le menu cuisine est affiché et que mouseover et mouseout sur left alors :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
      jQuery(right).opacity 0.10 (mais là, je ne sais pas :oops:)
      jQuery("#left").show();
      jQuery("#salon").hide();
      jQuery("#cuisine").show();

Inversement pour le menu salon
Mais si déjà, vous pouvez m'éclairer pour le menu cuisine, je pense que je pourrais me débrouiller pour l'autre...

J'ai essayé en mettant des conditions if, else if et else mais à chaque fois, je perds mes effets

Par exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 
jQuery(document).ready(function(){
/****************menus*****************/
  jQuery("#menu_cuisine").show(function(){
 
if jQuery("#left").mouseover(function(){
    jQuery(this).show();
    jQuery("#right").fadeTo("slow",0.10);
    jQuery("#salon").hide();
    jQuery("#cuisine").fadeTo("slow",1);
  })
 
else if jQuery("#right").mouseover(function(){
    jQuery("#left").fadeTo("slow",0.10);
    jQuery(this).show();
    jQuery("#salon").fadeTo("slow",1);
    jQuery("#cuisine").hide();
  })
 
else {
    jQuery("#left").fadeTo("slow",1);
    jQuery("#right").fadeTo("slow",0.10);
    jQuery("#salon").hide();
    jQuery("#cuisine").fadeTo("slow",1);
  }
 
  });

Merci pour votre aide et/ou conseils
@ +++

SpaceFrog · 15/12/2010, 19h55

perso je passerais pas un mouseenter et mouseleave, j'ai toujours eu des soucis avec les autres

jakols · 15/12/2010, 19h59

ok merci

je vais tester ça

sinon les conditions telles que je les ai écrites plus haut c'est correct ?

SpaceFrog · 15/12/2010, 20h48

je pige pas le test

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

if jQuery("#left").mouseover

on peut tester un mouseover ?

jakols · 15/12/2010, 22h57

ah bah je ne sais pô.
comme dit, c'est ma première expérience alors...
il faudrait faire quoi alors ?
je regarde depuis des jours ici et là, en plus du reste...mais je ne trouve pas pour ces histoires de conditions.
Alors si vous pouviez m'aiguiller ça serait sympa

Merci
@ +++

jakols · 15/12/2010, 23h04

je viens de tester avec ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
jQuery(document).ready(function(){
/****************menus*****************/
jQuery("#left, #right, #cuisine, #salon").show(function(){
    jQuery("#left, #right, #cuisine, #salon").fadeTo("slow",1);
  });
jQuery("#left, #right, #cuisine, #salon").hide(function(){
    jQuery("#left, #right, #cuisine, #salon").fadeTo("slow",0.1);
  });
 
jQuery("#menu_cuisine").show(function(){
    jQuery("#left, #cuisine").show();
    jQuery("#right").hide();
    jQuery("#salon").fadeOut();
 
    jQuery("#right").mouseenter(function (){;
      jQuery("#right, #salon").show();
      jQuery("#left").hide();
      jQuery("#cuisine").fadeOut();
      }).mouseleave(function (){;
      jQuery("#right").hide();
      jQuery("#left, #cuisine").show();
      jQuery("#salon").fadeOut();
      });
 
 
  });
 
 
 
jQuery("#menu_salon").show(function(){
    jQuery("#left").hide();
    jQuery("#right").show();
    jQuery("#salon").show();
    jQuery("#cuisine").fadeOut();
    jQuery("#left").mouseenter(function (){;
      jQuery("#left").show();
      jQuery("#right").hide();
      jQuery("#salon").fadeOut();
      jQuery("#cuisine").show();
      }).mouseleave(function (){;
      jQuery("#right").show();
      jQuery("#left").hide();
      jQuery("#salon").show();
      jQuery("#cuisine").fadeOut();
      });
 
 
  });
 
});
 
</script>

Y'a des choses qui se passent mais bon, c'est pas encore ça.
J'ai vu aussi que peut être .hover () ou toggle () pourrait m'être utile ?!?

Merci pour vos conseils
@ +

jakols · 16/12/2010, 11h56

Bonjour à tous,

alors dernier test en cours :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<script type="text/javascript">
// rollover
 
jQuery(document).ready(function(){
 
 
  jQuery("#menu_cuisine").show(function(){
    jQuery("#left").fadeTo("slow", 1), .hover(function()
	     {$(this).show();
        jQuery("#salon").hide();
        jQuery("#cuisine").show();},
    	 function(){$(this).show();
        jQuery("#salon").hide();
        jQuery("#cuisine").show();}
       );
    jQuery("#right").fadeTo("slow", 0.10).hover(function()
	     {$(this).fadeTo("slow", 1);
        jQuery("#salon").fadeTo("slow",1);
        jQuery("#cuisine").hide();},
    	 function(){$(this).fadeTo("slow", 0.10);
        jQuery("#salon").hide();
        jQuery("#cuisine").fadeTo("slow",1);}
       );
    jQuery("#salon").hide();
    jQuery("#cuisine").fadeTo("slow",1);
}
);
 
  jQuery("#menu_salon").show(function(){
    jQuery("#left").fadeTo("slow", 0.10), .hover(function()
	     {$(this).fadeTo("slow", 1);
        jQuery("#salon").hide();
        jQuery("#cuisine").fadeTo("slow",1);},
    	 function(){$(this).fadeTo("slow",0.10);
        jQuery("#salon").fadeTo("slow",1);
        jQuery("#cuisine").hide();}
       );
    jQuery("#right").fadeTo("slow", 0.10),.hover(function()
	     {$(this).show();
        jQuery("#salon").show();
        jQuery("#cuisine").hide();},
    	 function(){$(this).show();
        jQuery("#salon").show();
        jQuery("#cuisine").hide();}
       );
    jQuery("#salon").fadeTo("slow",1);
    jQuery("#cuisine").hide();
}
);
 
});
 
</script>

Marche pas non plus

Toutes les images s'affichent et rien ne se passe...

Des pistes ???
Merci bcp,
@ ++

15/12/2010, 19h55	#2
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 001 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 001 Points : 45 077 Points : 45 077	perso je passerais pas un mouseenter et mouseleave, j'ai toujours eu des soucis avec les autres __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

15/12/2010, 19h59	#3
jakols Invité de passage Inscription : décembre 2009 Messages : 9 Détails du profil Informations forums : Inscription : décembre 2009 Messages : 9 Points : 2 Points : 2	ok merci je vais tester ça sinon les conditions telles que je les ai écrites plus haut c'est correct ?
	00

15/12/2010, 20h48	#4
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 001 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 001 Points : 45 077 Points : 45 077	je pige pas le test Code : Sélectionner tout - Visualiser dans une fenêtre à part if jQuery("#left").mouseover on peut tester un mouseover ? __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

15/12/2010, 22h57	#5
jakols Invité de passage Inscription : décembre 2009 Messages : 9 Détails du profil Informations forums : Inscription : décembre 2009 Messages : 9 Points : 2 Points : 2	ah bah je ne sais pô. comme dit, c'est ma première expérience alors... il faudrait faire quoi alors ? je regarde depuis des jours ici et là, en plus du reste...mais je ne trouve pas pour ces histoires de conditions. Alors si vous pouviez m'aiguiller ça serait sympa Merci @ +++
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email