Partage
  • Partager sur Facebook
  • Partager sur Twitter

changement style onmouseover onmouseout

bordure tableau, Firefox et IE

Sujet résolu
    10 novembre 2008 à 11:36:26

    Salut, j'écris un peu désespéré.
    Mon but est de mettre en évidence les lignes d'un tableau en les encadrant par une bordure grise en pointillé au passage de la souris.
    Voici mon code:

    function change_style_ligne(ligne, survole){
    
    	if(survole)// passage de la souris (onmouseover)
    	{//bordure pointillé
    		if(document.all)
    		{
    			//IE
    			ligne.setAttribute("cssText", 'borderWidth:2px');
    			ligne.setAttribute("cssText", 'borderColor:grey');
    			ligne.setAttribute("cssText", 'borderStyle:dashed');		
    		//	ligne.setAttribute("cssText", 'background:black');		
    			}
    		else
    		{
    			//FIREFOX & AUTRES
    			ligne.setAttribute("style", 'border-width:2px');
    			ligne.setAttribute("style", 'border-color:grey');
    			ligne.setAttribute("style", 'border-style:das hed');		
    		//	ligne.setAttribute("style",'background:black');		
    			}		
    	}
    	else // (onmouseout)
    	{
    		ligne.setAttribute("style",'border:none');	
    		
    	}
    
    }
    


    La fonction ne marche pas, enfin... lorsque je décommente la ligne n°11 setAttribute('style,background:black')
    les lignes de mon tableau deviennent noir. Ce sont donc bien les lignes 8, 9 et 10 qui ne marche pas.

    J'ai essayé en remplaçant border-attribut par borderAttribut comme précisé dans la FAQ du forum, mais rien.

    Je précise que sous IE rien ne marche... forcement. Je débute en JS donc j'accepte toutes critiques.
    Merci de vos conseils
    • Partager sur Facebook
    • Partager sur Twitter
      10 novembre 2008 à 13:45:21

      Utilise plutôt cette syntaxe pour modifier du style :
      ligne.style.borderLeft = '1px solid black';
      lignt.style.backgroundColor = 'black';
      
      • Partager sur Facebook
      • Partager sur Twitter
        10 novembre 2008 à 15:20:57

        Merci ,j'avais déjà tenté cette méthode, mais cela ne change rien.
        Le background change bien dans les deux cas enfin seulement sur Firefox.

        Donc comment faire le même changement sur IE mais surtout comment changer les bordures d'une ligne au passage de la souris?
        • Partager sur Facebook
        • Partager sur Twitter
          10 novembre 2008 à 15:25:38

          Dans ce cas, j'ai l'impression que ton problème se situe surtout au niveau de la capture de l'évènement "lors du survol". La syntaxe "element.style.propriete = 'valeur';" fonctionne très bien sur les deux navigateurs. L'usage de l'attribut "cssText" me semble aussi bien étrange, surtout si tu dis qu'elle fonctionne pour certaines propriétés mais pas pour d'autre. Essaie peut-être cela :
          Mais si c'est pour un simple changement de style, tu es sûr de ne pas pouvoir le faire en CSS ?

          EDIT : c'est bon, je sais quel est ton problème : l'utilisation du nom "grey" sur IE. Evite d'utiliser des noms de couleurs, préfères leur code hexadécimal, pour éviter ce genre de problème de compatibilité.
          Mais encore une fois, regarde quand même du côté du CSS si c'est pour changer du style lors du survol d'un élément ;)
          • Partager sur Facebook
          • Partager sur Twitter
            10 novembre 2008 à 15:33:49

            Bah, je vois pas trop comment...
            En gros j'ai mon tableau html genre:
            <table>
            <tr oonmouseover="change_style_ligne_cv(this,true);" onmouseout="change_style_ligne_cv(this,false);"> ma ligne</tr>
            <tr oonmouseover="change_style_ligne_cv(this,true);" onmouseout="change_style_ligne_cv(this,false);"> ma ligne</tr>
            <tr oonmouseover="change_style_ligne_cv(this,true);" onmouseout="change_style_ligne_cv(this,false);"> ma ligne</tr>
            </table>

            Puis bon ma fonction que j'ai déjà posté.
            La fonction est bien appelé et marche lorsque je veux changé la couleur d'arrière plan de la ligne.
            Donc je ne pense pas que la capture de l'évènement pose problème.

            Si tu sais comment changé les bordures dynamiquement, soit en JS soit en CSS je suis preneur.

            [edit] je viens de voir ton édit donc je test puis je reviens
            merci en tout cas
            • Partager sur Facebook
            • Partager sur Twitter
              10 novembre 2008 à 15:52:24

              <style content="text/css">
              	table tr:hover td{
              		border: 2px dashed #AFAFAF;
              	}
              </style>
              
              <table>
              	<tr>
              		<td>test</td><td>test</td>
              	</tr>
              	<tr>
              		<td>test</td><td>test</td>
              	</tr>
              </table>
              


              Ceci met une bordure autours des td lors du survol de la tr.
              • Partager sur Facebook
              • Partager sur Twitter
                10 novembre 2008 à 16:18:56

                Oui c'est ce que je viens de découvrir.
                En faite on ne peux pas changé la bordure d'une ligne.
                Par contre on peut changé celle d'une cellule ou même de la ligne.
                Donc pour avoir l'effet désirer je change chaque ligne en un tableau.

                A noté, que faire ce changement en CSS est vraiment beaucoup plus léger et sûre.
                Merci du conseil. Pour ceux qui passe par là et qui se demande comment faire en gros ca donne pour chaque ligne:
                <table><tr>une ligne</tr></table>
                <table><tr>une autre ligne</tr></table>
                

                et le CSS
                table:hover{
                border:2px solid #AAA;
                ]
                


                à modifier à souhait !

                Merci en tous cas!
                • Partager sur Facebook
                • Partager sur Twitter

                changement style onmouseover onmouseout

                × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                • Editeur
                • Markdown