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

29 sept. 2005, 11:04

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

29 sept. 2005, 11:11

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

29 sept. 2005, 11:17

Merci pour ton aide

! Même si j'avoue ne pas avoir tout pigée

!

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

?

29 sept. 2005, 11:23

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

29 sept. 2005, 11:33

Mais si je remet ça dans la balise <td> qu'elle est l'interet d'utiliser
une feuille javascript séparé

?

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

<td style-javascript="bouton">

histoire d'optimiser le code

?

29 sept. 2005, 11:44

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

29 sept. 2005, 11:49

Bon allez, un peu de lecture !

Où mettre son script Javascript

Principe de séparation du contenu

=== pour aller plus loin ===

Séparer le contenu du comportement

29 sept. 2005, 12:02

ç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

!

29 sept. 2005, 12:24

Si c'est un style, tu n'as aucun besoin de javascrit.
Juste d'une classe CSS.

29 sept. 2005, 13:04

Oui mais non les styles css ne peuvent pas s'inclure
dans une balise <td> comme j'ai besoin

!

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?

29 sept. 2005, 13:43

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

et en CSS

.avecbords{
border : 1px outset red;
}

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

29 sept. 2005, 14:17

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

?

29 sept. 2005, 14:34

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.

29 sept. 2005, 14:45

<td onMouse="function bouton"></td>

donc comme çà

?

29 sept. 2005, 14:49

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

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

Qui est en ligne