Page 1 sur 2

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

Posté : 29 sept. 2005, 11:04
par Lareine
Voilà ce que je met dans chacune des cellules du tableau:

[/color]
[php]<td align="center" background="bgbtyr.jpg"
                bgcolor="#FAEA92" style="border-style: outset"
                onmousedown="this.style.borderStyle='inset'"
                onmouseup="this.style.borderStyle='outset'"
                onchange="background='bgbtyr.jpg'">[/php]
[color=orange][HTML][/color]

j'aimerais maintenant mettre la partie javascript dans une 
feuille séparé appelé [b]ippai.js[/b]

j'ai réecrit d'une façon que je supose pas bonne  :roll: :

[color=orange][ippai.js][/color]
[php]stbt { 
  onmousedown="this.style.borderStyle='inset'"
  onmouseup="this.style.borderStyle='outset'" 
  onchange="background='bgbtyr.jpg'"
}[/php]
[color=orange][/ippai.js][/color]

et pour appeler la fonction je voudrait mettre:

[color=orange][PHP/HTML][/color]
[php]<script language=JavaScript src="ippai.js"></script>[/php]
[color=green]et dans chaque cellule:[/color]

 [php]<td style="ippai.js='stbt'">[/php]
[color=orange][/PHP/HTML][/color]

Merci si quelqu'un peut me donner son avis et m'aider
à remettre mon code en ordre  :oops: !

j'ai cru lire aussi qu'on pouvait inclure un javascript 
dans un [b]css[/b] mais je n'arrive plus a trouver où  :oops: !

Posté : 29 sept. 2005, 11:11
par mere-teresa
Oula, tu t'es un peu mélangée les pinceaux.

Il te faut définir des fonctions javascript, que tu vas mettre dans ton fichier .js
Ensuite tu inclus ce fichier (là ton code est bon) dans le head, ainsi tu pourras te servir des fonctions dans toute la page.

onmousedown="this.style.borderStyle='inset'"
onmouseup="this.style.borderStyle='outset'"
onchange="background='bgbtyr.jpg'"


sera remplacé par

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


et ton fichier Javascript sera avec

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


Avec un peu de classe, tu ferais même une seule fonction qui modifie si c'est en inset, le mettre en outset et si c'est en outset mettre en inset et sinon...etc...

Posté : 29 sept. 2005, 11:17
par Lareine
Merci pour ton aide :P ! Même si j'avoue ne pas avoir tout pigée :oops: !

Je met quoi dans la balise <td > au final pour appeler ma fonction :P ?

Posté : 29 sept. 2005, 11:23
par mere-teresa
onmousedown="javascript: changeBordureIn(this)"
onmouseup="javascript: changeBordureOut(this)"
onchange="javascript: changeBckgd(this)"

Posté : 29 sept. 2005, 11:33
par Lareine
Mais si je remet ça dans la balise <td> qu'elle est l'interet d'utiliser
une feuille javascript séparé :-k ?

N'y aurrais t'il pas moyen d'uttiliser une fonction genre

<td style-javascript="bouton">

histoire d'optimiser le code :oops: ?

Posté : 29 sept. 2005, 11:44
par Cyrano
Non : autre chose lareine n'éparpille pas ton sujet sur trois messages différents pour un problème unique. On est tolérant et tu vois qu'on te répond partout, mais nous prends pas non plus pour des valises ;)

Posté : 29 sept. 2005, 11:49
par mere-teresa

Posté : 29 sept. 2005, 12:02
par Lareine
ça j'ai pigée ou le mettre mais, pas la syntaxe à utiliser dans ma
balise <td>

Il faudrais que je cherche quoi ?

gestion de style javascript dans la cellule d'un tableau :? ?

Ton exemple parle d'un formulaire, et ce que je veux faire moi
c'est un style de bouton dans un fichier *.js appliquable à plusieurs
cellules...

Le truc parrait simple mais il semble être très dur à trouver des
exemple clair et pratique sur le net :? !

Posté : 29 sept. 2005, 12:24
par mere-teresa
Si c'est un style, tu n'as aucun besoin de javascrit.
Juste d'une classe CSS.

Posté : 29 sept. 2005, 13:04
par Lareine
Oui mais non les styles css ne peuvent pas s'inclure
dans une balise <td> comme j'ai besoin :roll: !

Donc si d'après toi Style ne convient pas (pour je ne sais quel
raison c'est plutôt une mise en forme de tableau donc peut-
être plutôt quelque chose du genre:

<td class="changeBordureIn='url(ippai.js)'">

ou

<td id="changeBordureIn='url(ippai.js)'">

si j'ai pas encore paumée toute ma tête en route :? !

[ippai.js]
function changeBordureIn(td_element)
{
td_element.style.borderStyle='inset';
if ( onmousedown="javascript: changeBordureIn(inset)"
onmouseup="javascript: changeBordureOut(outset)"
onchange="javascript: changeBckgd(bgbtyr.jpg)" );
}
[/ippai.js]

J'ai aussi des doutes pour le placement des onmouse?

Posté : 29 sept. 2005, 13:43
par mere-teresa

<td class="avecbords">blabla</td>


et en CSS


.avecbords{
border : 1px outset red;
}

Le javascript sert avec les événements (onMouse..., onChange, etc.)

Posté : 29 sept. 2005, 14:17
par Lareine
donc :

[ippai.js]

Code : Tout sélectionner

function bouton(td_element) { td_element.style.borderStyle='inset'; if ( onmousedown="javascript: changeBordureIn(inset)" onmouseup="javascript: changeBordureOut(outset)" onchange="javascript: changeBckgd(bgbtyr.jpg)" ); }
[ippai.js]

[HTML/PHP]
<script language=JavaScript src="ippai.js"></script>


 <td class="bouton">
 <a href="index.php">Accueil</a>
 </td>  
[HTML/PHP]

Comme çà donc :o ?

Posté : 29 sept. 2005, 14:34
par mere-teresa
Non !
Les capteurs d'événements étaient bien placés, dans le HTML.

<td onMouse="actionjavascript que tu veux lui faire faire"></td>

ton action js peut être dans un fichier externe.

Posté : 29 sept. 2005, 14:45
par Lareine
<td onMouse="function bouton"></td> 
donc comme çà :roll: ?

Posté : 29 sept. 2005, 14:49
par mere-teresa
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 :)