<td class="bouton"    
    onmousedown="this.style.borderStyle='inset'" 
    onmouseup="this.style.borderStyle='outset'"> 

Ayez, j'ai enfin installé [b]Firefox[/b] et [b]Opera[/b] pour valider mon astuce :D !
C'est là que je me suis rendu compte que les [b]style outset[/b] de ses deux
navigateur avait une [b]bordure grise & noire[/b]. Donc pour garder le même
design que sous [b]Internet Explorer[/b] j'ai rajouté "[b]color:#FFFFFF;[/b]" pour
obtenir une [b]bordure blanche & grise[/b]. Le résultat est impeccable avec
[b]Opera[/b]. Mais sur [b]Firefox[/b] les bordures obtenues sont plus grisées, mais
le style de couleur des bordures est globalement respecté :) !

Je récapitule ma tite astuce :) :

Code coté [b]css[/b] pour le style par défaut :

[color=orange][ippai.css][/color][code]
td.bouton { background:#FAEA92 url(bgbtyr.jpg); border:4px outset; color:#FFFFFF; }

[/code][color=orange][/ippai.css] [/color]

Code coté [b]html[/b] :
[php]<td class="bouton"
onmousedown="this.style.borderStyle='inset'"
onmouseup="this.style.borderStyle='outset'"> [/php]

Du coup j'ai plus besoin de la [b]feuille javascript[/b] séparé pour l'instant
et j'ai un code plus léger, joie :P !

Cette astuce est donc Validé pour [b]Internet Explorer[/b], [b]Opera[/b], [b]Firefox[/b]
et [b]Konqueror[/b].
Problème Résolu donc :o !

Merci à [b]Cyrano[/b] pour son aide sur l'optimisation de ma feuille de style
http://www.phpfrance.com/forums/voir_reponse-63525.php#63525
et ses précisions sur les limite de l'utilisation des fonction [b]hover[/b] et
[b]active[/b]. Et à [b]mere-teresa[/b] pour ses judicieuse remarque sur l'utilisation
du [b]Javascript[/b] dans les styles =D> !

[color=darkblue]C'est pénible d'entretenir 2 sujets à la fois...
Mais le code présenté dans ton message au dessus ne contient que du HTML et du Javascript....[/color]

<td class="bouton"  
    onmousedown="this.style.borderStyle='inset'"
    onmouseup="this.style.borderStyle='outset'">

Nan je crois pas :? !
ça serais trop beau même si certains semble prétendre que
le css serais plus léger et puissant que le javascript...

Ou alors faire un mix [b]css[/b]+[b]js[/b] du genre:

[php]
<td class="bouton"
onmousedown="this.style.borderStyle='inset'"
onmouseup="this.style.borderStyle='outset'">[/php]

le css servant juste pour la couleur et images de fond des boutons
puisque la fonction hover du css ne fonctione pas avec [b]<td>[/b] :-k !?

[quote]Ou alors devrais-je continuer dans l'idée d'utiliser une feuille de style
javascript pour les boutons Rolling Eyes ?[/quote]

Heu...CCS != Javascript

:shock: ](*,)

et il y'aurai t'il un équivalent de [b]onMouseover[/b] ou [b]onmousedown[/b] en [b]CSS[/b] :? ?

Apparement je ne suis pas la seul à me poser cette question :roll:...
http://www.experts-exchange.com/Web/Web_Languages/CSS/Q_20823238.html

[color=orange]Le début de solution en [b]css[/b] se continue sur ce post :wink: !:
http://www.phpfrance.com/forums/voir_reponse-64125.php#64125[/color]

Ou alors devrais-je continuer dans l'idée d'utiliser une[b] feuille de style
javascript[/b] pour les [b]boutons[/b] :roll: ?

La pseudo classe :hover n'est pas interprétée par Internet Explorer sur autre chose qu'une balise <a>

Bingo avec le [b]css[/b] et [b]td.bouton[/b] :P !
Tellement évident au final que j'ai presque honte
de ne pas y avoir penser avant :oops:

Par contre [b]hover[/b] ne semble pas fonctionner sur
la cellule. Je vais essayer de le remplacer par un
[b]Onclik[/b] \:D/ !
Zut ça change rien :shock: !

Ta feuille de style fait référence à a.bouton et non à td.bouton donc ton attribut class="bouton" doit se trouver dans les balises <a> et non dans les <td>

[b]function bouton(this)
{
this.style.borderStyle='inset';
}[/b]

Je brule ou pas :P ?

<td class="bouton">

je comprend plus rien #-o !

je doit mettre [php]<td class="bouton">[/php] à la place de

[color=orange][PHP/HTML][/color]
<td onmousedown="javascript: changeBordureIn(this)"
onmouseup="javascript: changeBordureOut(this)"
onchange="javascript: changeBckgd(this)">
[color=orange][/PHP/HTML][/color]

et [b]a.bouton[/b] je le met où ?

Dans:

[color=orange][ippai.js][/color]
[code]function bouton(td_element)
{
td_element.style.borderStyle='inset';
}[/code][color=orange][/ippai.js][/color]

à la place de [b]td_element[/b] :-k ?

Ou peut être fais-tu une confusion [b]Cyrano[/b] :? ?

en faite je ne me sert plus de la fonction [b]a.bouton[/b] de mon
[b]css[/b] comme elle ne s'applique qu'au lien et non aux cellule
de mon tableau qui me sert au formatage de la largueur
de mes boutons :o !

Je vais d'ailleur pensser à effacer les traces de la fonction
si elles peuvent entrer en confli avec mon javascript :-k !

Forcément : tu as enlevé l'attribut class de tes balises a, le style sur a.bouton ne s'applique donc nulle part.

Alors voilà j'ai essayé d'écrire les variable du fichier [b]js externe[/b]
mais apparement c'est pas bon. Je ne comprend pas comment
lier [b](this)[/b] ... et je trouve rien dans :google: #-o !

[color=orange][ippai.js][/color]
[code]
function changeBordureIn(td_element) { td_element.style.borderStyle='inset'; }
changeBordureOut(td_element) { td_element.style.borderStyle='outset'; }
changeBckgd(td_element) { td_element.style.borderStyle='url(bgbtyr.jpg)'; }
[/code][color=orange][/ippai.js][/color]

Résultat mes bouton son bien ajusté, mais ils sont invisible :oops: !
Ni les bordures, ni l'image de fond n'apparait :-k !

http://ippai.free.fr/index.php

d'accord :o !!! Donc je gagne quasi rien niveau poid dans la page
[b]html/php[/b].

Mais le fait d'utiliser une [b]feuille javascript externe[/b] aura comme
seul avantage de permetre de changer le comportement et la
couleur et l'image de fond du bouton en éditant uniquement la
feuille [b]*.js[/b]...

Moi qui esperrait bêtement pouvoir réduire le code comme avec
une balise [b]css[/b] :oops: ....

Bon ok merci pour ta patience, je vais tester tout ça sur mon
site dans la journée :wink: !

[color=darkblue]Pour ta question : tu as compris comment il fallait faire donc :) c'est cool.

Pour ce que tu y gagnes ...euh...pas grand chose, puisque tu ne modifies qu'une seule propriété de style.
Tu pourrais y gagner en lisibilité et si tu fais cela pour plusieurs <td>, tu pourras modifier plus facilement à l'avenir (si tu veux changer l'image .jpg ou que ce soit inversé inset et outset). Mais en nombre de caractères, heu...[/color]

<td style="border-style: outset" 
onmousedown="this.style.borderStyle='inset'" 
onmouseup="this.style.borderStyle='outset'" 
onchange="background='bgbtyr.jpg'"> 

[quote="mere-teresa"][color=darkblue]Presque :
[url]http://www.phpfrance.com/forums/voir_reponse-63691.php#63691[/url] mais je t'ai déjà donné cette réponse d'une part.

D'autre part, c'est [b]toi [/b]qui veux mettre ton javascript en fichier externe :)[/color][/quote]

Et bien oui puisque c'est le sujet de mon poste :P !

Je ne vois pas l'interet d'utiliser un fichier [b]js[/b] externe si c'est
pour mettre le plus gros du code javascript dans la page html :) ?

De plus tes posts réponde souvent avec pas mal de sous entendus
pas très clair pour une débutante comme moi... :roll:

donc tu semble conseiller :

<td onmousedown="javascript: changeBordureIn(this)"
onmouseup="javascript: changeBordureOut(this)"
onchange="javascript: changeBckgd(this)">

du coup si c'est c'est bien ce que tu essaye de m'expliquer
Je ne vois pas trop ce que je gagne niveau légereté du
code par rapport à:

[php]<td style="border-style: outset"
onmousedown="this.style.borderStyle='inset'"
onmouseup="this.style.borderStyle='outset'"
onchange="background='bgbtyr.jpg'"> [/php]

Sans doute quelque chose m'échappe encore :oops: ?