[Résolu]Suite pb rollover

Bonsoir à tous,

Grâce aux conseils de Vaxilart, j'ai quasiment résolu mon problème de rollover avec JQuery pour mon template.

Toutefois, il me reste encore deux points à élucider
J'aimerais que se déclenchent ces actions uniquement lorsque :

****menu salon affiché (désigné par la class .moduletable_salon)****

  jQuery("#left").mouseout(function(){
    jQuery("#left").hide();
    jQuery("#left2").show();
    jQuery("#right").fadeTo("slow",1);
    jQuery("#right2").hide();
    jQuery("#salon").show();
    jQuery("#cuisine").hide();
  });

et inversement :

***menu cuisine affiché (désigné par la class.moduletable_cuisine)***

    jQuery("#right").mouseout(function(){
    jQuery("#right").hide();
    jQuery("#right2").show();
    jQuery("#left").fadeTo("slow",1);
    jQuery("#left2").hide();
    jQuery("#salon").hide();
    jQuery("#cuisine").show();
  });

mais je ne vois pas comment faire pour rajouter ces conditions

Par ailleurs, j'ai constaté que le fait d'ajouter ce script annulait l'affichage de toutes les polices mises en place avec le plugin Cufon.
Qq'un saurait-il me dire pourquoi ? J'ai remplacé les $ par jQuery mais tjs pareil.

Le site est sous Joomla 1.5.22

Merci pour vos conseils
@ +

Pour info, le script intégral :

<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(){

  jQuery(".moduletable_cuisine").show(function(){
    jQuery("#left").show();
    jQuery("#left2").hide();
    jQuery("#right").hide();
    jQuery("#right2").show();
    jQuery("#salon").hide();
    jQuery("#cuisine").show();
  });
  
  jQuery("#left").mouseover(function(){
    jQuery(this).fadeTo("slow",1);
    jQuery("#left2").hide();
    jQuery("#right").hide();
    jQuery("#right2").show();
    jQuery("#salon").hide();
    jQuery("#cuisine").show();
  });

  jQuery("#left2").mouseover(function(){
    jQuery("#left").fadeTo("slow",1);
    jQuery(this).hide ();
    jQuery("#right").hide();
    jQuery("#right2").show();
    jQuery("#salon").hide();
    jQuery("#cuisine").show();
  });

****que lorsque menu salon affiché  (.moduletable_salon)****
  jQuery("#left").mouseout(function(){
    jQuery("#left").hide();
    jQuery("#left2").show();
    jQuery("#right").fadeTo("slow",1);
    jQuery("#right2").hide();
    jQuery("#salon").show();
    jQuery("#cuisine").hide();
  });
*************************************

  jQuery(".moduletable_salon").show(function(){
    jQuery("#left").hide();
    jQuery("#left2").show();
    jQuery("#right").show();
    jQuery("#right2").hide();
    jQuery("#salon").show();
    jQuery("#cuisine").hide();
  });
  
  jQuery("#right").mouseover(function(){
    jQuery("#left").hide();
    jQuery("#left2").show ();
    jQuery("#right2").hide();
    jQuery(this).fadeTo("slow",1);
    jQuery("#salon").show();
    jQuery("#cuisine").hide();
  });

  jQuery("#right2").mouseover(function(){
    jQuery("#left").hide();
    jQuery("#left2").show ();
    jQuery(this).hide();
    jQuery("#right").fadeTo("slow",1);
    jQuery("#salon").show();
    jQuery("#cuisine").hide();
  });
  

****que lorsque menu cuisine affiché  (.moduletable_cuisine)****
  jQuery("#right").mouseout(function(){
    jQuery("#right").hide();
    jQuery("#right2").show();
    jQuery("#left").fadeTo("slow",1);
    jQuery("#left2").hide();
    jQuery("#salon").hide();
    jQuery("#cuisine").show();
  });
**************************************
});

</script> 

Modifié par valols (17 Dec 2010 - 18:33)

Bonjour,

Si je comprends bien ta problématique, tu devras utiliser une structure Javascript en if/else.

L'idée sera de tester si ton menu est bien préalablement affiché avant de permettre l’interaction souhaité. Pour cela, le plus simple sera sûrement de tester une valeur CSS (probablement display).

Par exemple :

jQuery("#left").mouseout(function(){
    if(this.css(display) != "none"){
      jQuery("#left").hide();

      jQuery("#left2").show();

      jQuery("#right").fadeTo("slow",1);

      jQuery("#right2").hide();

      jQuery("#salon").show();

      jQuery("#cuisine").hide();
    }
    else{
       // ce qui arrive si la condition est fausse
    }
  });

Pour tes fonts, il y a @font-face qui devrait pouvoir résoudre le problème sans devoir passer par Cufont. (en tout cas, c'est personnellement une solution que je préfère)

Ok super merci Vaxilart
Je teste tout ça dans l'aprèm et te tiens au courant.
Juste une question encore :

Tu n'as pas pris peur en voyant le script ? lol !
C'est bon comme ça ou y'a moyen de l'optimiser ?

Merci encore,
@ + pour les résultats
Modifié par valols (23 Nov 2010 - 14:18)

Oh non, le script est plutôt bien. C'est sur que que tu pourrais l'optimiser ainsi par exemple:

****que lorsque menu cuisine affiché  (.moduletable_cuisine)****

  jQuery("#right").mouseout(function(){

    jQuery("#right, #left2, #salon").hide();

    jQuery("#right2, #cuisine").show();

    jQuery("#left").fadeTo("slow",1);

  });

Donc en rassemblant les éléments recevant la même action.

Hello Vaxilart,

Merci pour ce nouveau conseil
Je n'ai malheureusement pas encore trouver le temps de remettre le nez dedans et ce we pas dispo.
Donc, au programme de lundi
En attendant je te souhaite un bon WE
@ +++

Hello Vaxilart,

Bon petit changement de programme... du coup je suis embêtée.
J'ai ouvert un nouveau post ici
Si jamais tu passes par là et que tu as des petites lumières à partager... lol !

Merci bcp,
@+

helloooo


bon alors j'ai essayé dans tous les sens mais sans succès.

est-ce que je pourrais faire un truc dans ce genre ?

/****qd menu salon affiché seulement***/
jQuery("#menu_salon").show(function() && jQuery("#left").mouseout(function(){
      jQuery("#left").hide();
      jQuery("#left2").show();
      jQuery("#right").fadeTo("slow",1);
      jQuery("#right2").hide();
      jQuery("#salon").show();
      jQuery("#cuisine").hide();

  });
/****qd menu cuisine affiché seulement***/
jQuery("#menu_cuisine").show(function() && jQuery("#right").mouseout(function(){
      jQuery("#right").hide();
      jQuery("#right2").show();
      jQuery("#left").fadeTo("slow",1);
      jQuery("#left2").hide();
      jQuery("#salon").hide();
      jQuery("#cuisine").show();
  });

si j'enlève

jQuery("#menu_cuisine").show(function() && jQuery("#right").mouseout(function(){

ou

jQuery("#menu_salon").show(function() && jQuery("#left").mouseout(function(){

les mouseout fonctionnent très bien mais... tout le temps
or j'aurai besoin que ça fonctionne uniquement en fonction de la condition :

si menu cuisine affiché ou si menu salon affiché.

j'ai fait le tour du web et testé pas mal de choses mais ça ne fonctionne tjs pas comme je veux.

et puis suis pas sûre de pouvoir écrire "&&"

une autre piste peut être ?

merci bcp
@ +++


N.B. j'ai testé aussi avec ta soluce Vaxilart :

if(this.css(display) != "none"){

mais ça me retourne une erreur de script.
donc j'ai essayé avec ==none en changeant les résultats souhaités... tjs rien
avec attr("display") aussi... nada... bref j'ai fait le tour...

la solution doit pas etre loin pourtant

merci pour vos lumières

j'ai du mieux avec ça :

jQuery("#left").mouseout(function(){
    if(jQuery("#menu_cuisine").css("display") == "none"){
      jQuery("#left").hide();
      jQuery("#left2").show();
      jQuery("#right").show();
      jQuery("#right2").hide();
      jQuery("#salon").show();
      jQuery("#cuisine").hide();
    }
  });


jQuery("#right").mouseout(function(){
    if(jQuery("#menu_salon").css("display") == "none"){
      jQuery("#right").hide();
      jQuery("#right2").show();
      jQuery("#left").show();
      jQuery("#left2").hide();
      jQuery("#salon").hide();
      jQuery("#cuisine").show();
    }
  });

c'est à dire que :

lorsque je suis sur la page avec menu cuisine, et que je survole mes images :

l'image cuisine reste fixe (image "left") donc pas d'effet de mouseover et de mouseout... ça c'est ok !

l'image salon prend bien l'effet de mouseover mais par contre, rien pour le mouseout !!!

Idem sur la page menu salon, pas d'effet de mouseout

Ahhh grrrr !


Je continue...

La suite ....

si je fais ça :

/****************out******************/
jQuery("#left").mouseout(function(){
      jQuery(this).hide();
      jQuery("#left2").show();
      jQuery("#right").fadeTo("slow",1);
      jQuery("#right2").hide();
      jQuery("#salon").show();
      jQuery("#cuisine").hide();

  });
jQuery("#left2").mouseout(function(){
      jQuery(this).show();
      jQuery("#left").show();
      jQuery("#right").fadeTo("slow",1);
      jQuery("#right2").hide();
      jQuery("#salon").show();
      jQuery("#cuisine").hide();

  });

jQuery("#right").mouseout(function(){
      jQuery(this).hide();
      jQuery("#right2").fadeTo("slow",1);
      jQuery("#left").fadeTo("slow",1);
      jQuery("#left2").hide();
      jQuery("#salon").hide();
      jQuery("#cuisine").show();
 });
  
jQuery("#right2").mouseout(function(){
      jQuery(this).hide();
      jQuery("#right").fadeTo("slow",1);
      jQuery("#left").fadeTo("slow",1);
      jQuery("#left2").hide();
      jQuery("#salon").show();
      jQuery("#cuisine").hide();


  });

j'ai bien les effets voulus mouseover et out mais si je rajoute les conditions d'affichage selon le menu présent à l'écran... bah ça me fiche tout en l'air.
j'ai toutes mes images qui s'affichent qd je rajoute une condition et plus du tout de mouseover et out

Vous n'auriez pô une tit idée par hasard

Merci

Bon alors ça ne fonctionne pas

Dès que je mets un if... je perds tous mes effets et toutes mes images s'affichent.

Je dois avoir un pb de syntax mais je ne vois pas où.

Quelqu'un parmi vous pourrait m'éclairer ?

Dernier test avec .hover ()

   jQuery("#left").hover(function(){
      if("#menu_cuisine").show(function(){
	      $(this).show();
        jQuery("#salon").hide();
        jQuery("#cuisine").fadeTo("slow",1);},
    	 function(){$(this).show();
        jQuery("#salon").hide();
        jQuery("#cuisine").show();
        })

    if ("#menu_salon").show(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").hover(function(){
      if("#menu_cuisine").show(function(){
	      $(this).fadeTo("slow",1);
	      jQuery ("#left").fadeTo("slow",0.10);
        jQuery("#salon").fadeTo("slow",1);}
        jQuery("#cuisine").hide();},
    	 function(){$(this).show();
	      $(this).fadeTo("slow",0.10);
	      jQuery ("#left").fadeTo("slow",1);
        jQuery("#salon").hide();
        jQuery("#cuisine").fadeTo("slow",1);
        })

    if ("#menu_salon").show(function() {
	      $(this).show();
        jQuery("#salon").fadeTo("slow",1);
        jQuery("#cuisine").hide();},
    	 function(){$(this).show();
        jQuery("#salon").show();
        jQuery("#cuisine").hide();})
});

Merci bcp
@ +