Discussion :

[Lareine]

J'ai remarquée un petit bug dans ma fonction. En fait, si je clique sur la bordure,
elle reste bloquée en position enfoncée ... Du coup j'ai rajouté une ligne :

Code :

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

boutonElements[b].onmouseout=function() {this.style.borderStyle='outset';} //Hors zone

Pour que le bouton remonte lorsque le pointeur n'est plus dans sa zone.
Voici donc ma dernière version optimisé en date !

*.css

Code :

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

.bouton { background:#codecouleur url(image.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')};

*.(x)html

Code :

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

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

Encore merci à SpaceFrog pour la conception du Script, et denisC
pour la fonction de préchargement de la fonction externe !