Discussion :

[Lareine]

Actuellement j'utilise une fonction dans un *.js paliant le non fonctionnement de
td.bouton:active en CSS avec IE :
*.css

Code :

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

.bouton { background:#FAEA92 url(bgbtyr.jpg); border:4px outset; color:#FFFFFF; }

*.js

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
function bordure(bouton) 
{ 
  boutonElements=document.getElementsByTagName('td') 
  for (b=0;b<boutonElements.length;b++){ 
  if(boutonElements[b].className==bouton){ 
  boutonElements[b].onmousedown=function(){this.style.borderStyle='inset';} //Activé 
  boutonElements[b].onmouseup=function(){this.style.borderStyle='outset';} //Relaché 
  boutonElements[b].onmouseout=function(){this.style.borderStyle='outset';} //Hors zone 
  } 
 } 
} 
window.onload = function(){bordure('bouton')};

Elle fonctionne parfaitement avec juste <td class="bouton"> :
*.html

Code :

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

1
2
3
4
5
<table> 
      <tr>
        <td class="bouton"><a href="index.php">Acceuil</a></td>
      </tr> 
</table>

Je veut que ça puisse aussi fonctionner aussi simplement en faisant:
*.html

Code :

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

<div class="bouton"><a href="index.php">Acceuil</a></div>

Ce que je demande c'est que la fonction bordure soit identifiée dans les pages
html par la présence de l'attribut td ou div avec la valeur bouton dans la balise.
Rien de plus rien de moin.

Merci d'avance !

[Kerod]

Peut etre que je me trompe mais le problème ne viendrait pas de là :

boutonElements=document.getElementsByTagName('td')

Tu parles de td alors que c'est un div...Il faudra faire un choix soit td ou div...

pourquoi ne pas définir directement le <a> avec les bordures que tu souhaites ?

[Lareine]

Peut etre que je me trompe mais le problème ne viendrait pas de là :

boutonElements=document.getElementsByTagName('td')

Tu parles de td alors que c'est un div...Il faudra faire un choix soit td ou div...

Pas forcément

pourquoi ne pas définir directement le <a> avec les bordures que tu souhaites ?

Parce que en css, hover et active avec des bordures ne fonctionnent
justement qu'avec <a> sous IE5.01, IE5.5 et IE6+.
Moi je veux utiliser bordure Inset/Outset avec d'autres balises !

En faite, on m'a proposé 3 solutions :o !

Tout d'abord le *.css commun:

Code :

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

1
2
3
.bouton { background:#FAEA92 url(imagefond.jpg); border:4px outset; }
div.bouton,a.bouton,img.bouton { border-color:white; padding:1px; }
td.bouton { color:#FFFFFF; } /* Couleur bordure <td> Unifiee */

Proposition de javatwister:
Utiliser le sélecteur universel ('*'), mais cela ne fonctionne qu'avec IE6+ !

Fichier *.js

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
function bordure(bouton) 
{ 
  boutons=document.getElementsByTagName('*') 
  for(b=0;b<boutons.length;b++){ 
  if(boutons[b].className==bouton){ 
  boutons[b].onmousedown=function(){this.style.borderStyle='inset';} //Activé 
  boutons[b].onmouseup=function(){this.style.borderStyle='outset';} //Relaché 
  boutons[b].onmouseout=function(){this.style.borderStyle='outset';} //Hors zone 
  } 
 } 
} 
window.onload = function(){bordure('bouton')};

Les deux autres solutions sont compatible IE5.01, IE5.5, IE6+ !

En couplant la fonction bordure avec la fonction Retourne les Balises,
de Mr N. ! (C'est cette solution qui a ma préférence pour l'instant. )


Fichier *.js

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
function getBalises() { 
      ret  = new Array; 
 
      tds  = document.getElementsByTagName('td'); 
      for(i = 0 ; i < tds.length ; i++) { 
         ret[ret.length] = tds.item(i); 
      } 
 
      divs = document.getElementsByTagName('div'); 
      for(i = 0 ; i < divs.length ; i++) { 
         ret[ret.length] = divs.item(i); 
      } 
 
      as = document.getElementsByTagName('a'); 
      for(i = 0 ; i < as.length ; i++) { 
         ret[ret.length] = as.item(i); 
      } 
 
      imgs = document.getElementsByTagName('img'); 
      for(i = 0 ; i < imgs.length ; i++) { 
         ret[ret.length] = imgs.item(i); 
      } 
 
      return ret; 
   } 
 
function bordure(bouton) 
{ 
  boutons=getBalises(); 
  for (b=0;b<boutons.length;b++){ 
  if(boutons[b].className==bouton){ 
  boutons[b].onmousedown=function(){this.style.borderStyle='inset';} //Activé 
  boutons[b].onmouseup=function(){this.style.borderStyle='outset';} //Relaché 
  boutons[b].onmouseout=function(){this.style.borderStyle='outset';} //Hors zone 
  } 
 } 
} 
window.onload = function(){bordure('bouton')};

Ou proposition de PRoGRaFLaSH
En 1 fonction, en dupliquant le code pour cumuler plusieurs opérations avec
des balises différentes. Le code est donc plus lourd/long, moins souple pour
les modifications global de la fonction, mais l'appèle de cette dernière est
censée être légèrement plus rapide lors de la navigation !

Fichier *.js

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
function bordure(bouton) 
{ 
  boutons=document.getElementsByTagName('td') 
  for (b=0;b<boutons.length;b++){ 
  if(boutons[b].className==bouton){ 
  boutons[b].onmousedown=function(){this.style.borderStyle='inset';} //Activé 
  boutons[b].onmouseup=function(){this.style.borderStyle='outset';} //Relaché 
  boutons[b].onmouseout=function(){this.style.borderStyle='outset';} //Hors zone 
  } 
  } 
  boutons=document.getElementsByTagName('div') 
  for (b=0;b<boutons.length;b++){ 
  if(boutons[b].className==bouton){ 
  boutons[b].onmousedown=function(){this.style.borderStyle='inset';} //Activé 
  boutons[b].onmouseup=function(){this.style.borderStyle='outset';} //Relaché 
  boutons[b].onmouseout=function(){this.style.borderStyle='outset';} //Hors zone 
  } 
  } 
  boutons=document.getElementsByTagName('a') 
  for (b=0;b<boutons.length;b++){ 
  if(boutons[b].className==bouton){ 
  boutons[b].onmousedown=function(){this.style.borderStyle='inset';} //Activé 
  boutons[b].onmouseup=function(){this.style.borderStyle='outset';} //Relaché 
  boutons[b].onmouseout=function(){this.style.borderStyle='outset';} //Hors zone 
  } 
  } 
  boutons=document.getElementsByTagName('img') 
  for (b=0;b<boutons.length;b++){ 
  if(boutons[b].className==bouton){ 
  boutons[b].onmousedown=function(){this.style.borderStyle='inset';} //Activé 
  boutons[b].onmouseup=function(){this.style.borderStyle='outset';} //Relaché 
  boutons[b].onmouseout=function(){this.style.borderStyle='outset';} //Hors zone 
  } 
 } 
 
} 
window.onload = function(){bordure('bouton')};

Le tout pouvant être appelé dans le code (X)HTML par:

Code :

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

1
2
3
4
5
6
7
<td class="bouton"> 
 
<div class="bouton"> 
 
<a class="bouton" href="index.php"> 
 
<img class="bouton" src="imagejoli.jpg">

!

Merci à SpaceFrog pour la conception du Script de la fonction bordure,
denisC pour la fonction de préchargement de la fonction externe et
Mr N. pour la conception de la fonction Retourne les Balises ...