Style Bouton JScript dans <td> Optimisation façon css

29 sept. 2005, 14:56

Presque :
http://www.phpfrance.com/forums/voir_re ... .php#63691 mais je t'ai déjà donné cette réponse d'une part.

D'autre part, c'est toi qui veux mettre ton javascript en fichier externe

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

!

Je ne vois pas l'interet d'utiliser un fichier js 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...

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 à:

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

Sans doute quelque chose m'échappe encore

?

29 sept. 2005, 15:14

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...

29 sept. 2005, 15:24

d'accord

!!! Donc je gagne quasi rien niveau poid dans la page
html/php.

Mais le fait d'utiliser une feuille javascript externe 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 *.js...

Moi qui esperrait bêtement pouvoir réduire le code comme avec
une balise css

....

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

!

30 sept. 2005, 08:56

Alors voilà j'ai essayé d'écrire les variable du fichier js externe
mais apparement c'est pas bon. Je ne comprend pas comment
lier (this) ... et je trouve rien dans

!

[ippai.js]

Code : Tout sélectionner

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)'; }

[/ippai.js]

Résultat mes bouton son bien ajusté, mais ils sont invisible

!
Ni les bordures, ni l'image de fond n'apparait

!

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

30 sept. 2005, 09:17

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

30 sept. 2005, 09:45

je comprend plus rien

!

je doit mettre

<td class="bouton">

à la place de

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

et a.bouton je le met où ?

Dans:

[ippai.js]

Code : Tout sélectionner

function bouton(td_element) 
{ 
td_element.style.borderStyle='inset';
}

[/ippai.js]

à la place de td_element

?

Ou peut être fais-tu une confusion Cyrano

?

en faite je ne me sert plus de la fonction a.bouton de mon
css 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

!

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

!

30 sept. 2005, 11:02

function bouton(this)
{
this.style.borderStyle='inset';
}

Je brule ou pas

?

30 sept. 2005, 11:57

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>

30 sept. 2005, 12:24

Bingo avec le css et td.bouton

!
Tellement évident au final que j'ai presque honte
de ne pas y avoir penser avant

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

!

30 sept. 2005, 13:01

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

30 sept. 2005, 13:08

](*,)

et il y'aurai t'il un équivalent de onMouseover ou onmousedown en CSS

?

Apparement je ne suis pas la seul à me poser cette question

...
http://www.experts-exchange.com/Web/Web ... 23238.html

Le début de solution en css se continue sur ce post

!:
http://www.phpfrance.com/forums/voir_re ... .php#64125

Ou alors devrais-je continuer dans l'idée d'utiliser une feuille de style
javascript pour les boutons

?

30 sept. 2005, 14:10

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

Heu...CCS != Javascript

30 sept. 2005, 14:28

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 css+js du genre:

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

le css servant juste pour la couleur et images de fond des boutons
puisque la fonction hover du css ne fonctione pas avec <td>

!?

30 sept. 2005, 14:49

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....

03 oct. 2005, 20:45

Ayez, j'ai enfin installé Firefox et Opera pour valider mon astuce

!
C'est là que je me suis rendu compte que les style outset de ses deux
navigateur avait une bordure grise & noire. Donc pour garder le même
design que sous Internet Explorer j'ai rajouté "color:#FFFFFF;" pour
obtenir une bordure blanche & grise. Le résultat est impeccable avec
Opera. Mais sur Firefox 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é css pour le style par défaut :

[ippai.css]

Code : Tout sélectionner

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

[/ippai.css]

Code coté html :

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

Du coup j'ai plus besoin de la feuille javascript séparé pour l'instant
et j'ai un code plus léger, joie

!

Cette astuce est donc Validé pour Internet Explorer, Opera, Firefox
et Konqueror.
Problème Résolu donc

!

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

Style Bouton JScript dans <td> Optimisation façon css

Qui est en ligne