Changement style onmouseover onmouseout - bordure tableau, Firefox et IE

Signaler
Messages postés
1
Date d'inscription
jeudi 2 octobre 2008
Statut
Membre
Dernière intervention
10 novembre 2008
-
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
-
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:

Code : JavaScript
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, functionchange_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, 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


seb-ortega.com

1 réponse

Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
11
bonjour,

j'évite tojours les ???attribute
déjà : ça ne fonctionne pas de la même manière avec tous les navigateurs
et 'attaquer' directement le style me semble bien plus simple

element.style.???="valeur"
ou clasName pour en modifier plusieurs en même temps

ch'tiot exemple avec className :
<head>
    <style>   
        .survol    {    background-color:#FFFF00;
                        color:blue;
                   }
        .parti     {    background-color:transparent;
                        color:black;
                   }
    </style>
</head>

    <table>
        <tr    onmouseover="this.className='survol';"
               onmouseout="this.className='parti';">
           , l1 c1</td>l1 c2, l1 c3,
        <tr    onmouseover=\"this.className='survol';\"
               onmouseout=\"this.className='parti';\">
            l2 c1, l2 c2, l2 c3,        
   

</td></tr></tbody></table>
c'est un exemple... faudrait faire ça en dynamique...
quand au border : pas au niveau du <tr>
         soit dans soit dans ou <th>

Cordialement

<table bgcolor="#ffeebb" border="0">----,           Bul [mon Site] [M'écrire]        
</td>