Changement style onmouseover onmouseout - bordure tableau, Firefox et IE

sebortega Messages postés 1 Date d'inscription jeudi 2 octobre 2008 Statut Membre Dernière intervention 10 novembre 2008 - 10 nov. 2008 à 11:51
Bul3 Messages postés 4933 Date d'inscription samedi 1 juillet 2006 Statut Membre Dernière intervention 2 février 2015 - 10 nov. 2008 à 12:09
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

Bul3 Messages postés 4933 Date d'inscription samedi 1 juillet 2006 Statut Membre Dernière intervention 2 février 2015 16
10 nov. 2008 à 12:09
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>
0
Rejoignez-nous