fonction bordure avec <td>, <div> (et <a>)

31 oct. 2005, 14:54

Actuellement j'utilise une fonction dans un *.js paliant le non fonctionnement de
td.bouton:active en CSS avec IE :
*.css

Code : Tout sélectionner

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

*.js

Code : Tout sélectionner

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

Elle fonctionne parfaitement avec juste <td class="bouton"> :
*.html

Code : Tout sélectionner

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

Je veut que ça puisse aussi fonctionner aussi simplement en faisant:
*.html

Code : Tout sélectionner

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

Ce que je demande c'est que la fonction bordure soit identifiée dans les pages
html par la présence de l'attribut td ou div avec la valeur bouton dans la balise.
Cette fonction dois être gérée exclusivement dans le *.js. Donc du coté client
en Javascript. Les solution avec un script php et des requéte Mysql ne me
convienent donc pas

...

Merci d'avance

!

31 oct. 2005, 14:56

Je ne sais pas pkoi mais il me semble que tu as déjà posé cette question !
Merci donc d'utiliser le topic en cours... c'est plus simple pour tous

31 oct. 2005, 15:10

Parce je n'avais pas posée la question initial dans le bon
sens

…

Je l'ai donc reformulée ici de façon à ce que la corresponde
plus précisément à ma demande et augmenté mes chances
d'obtenir des réponses valables

...

Je demandais une solution en Javascript et les réponse
dans l'autre topic s'embourbaient dans des propositions
avec Mysql qui ne ne correspondaient pas ce que je
cherchais vraiment

...

J'ai mis l'autre poste en délestage en demandant de le
verrouiller, comme il ne mènera à riens vu la tournure
des réponses

...

31 oct. 2005, 15:10

Code : Tout sélectionner

<div class="bouton" onmousedown="javascript:this.style.borderStyle='inset';" onmouseup="javascript:this.style.borderStyle='outset';" onmouseout="javascript:this.style.borderStyle='outset';"><a href="index.php">Acceuil</a></div>

tu fais ça à chaque div...

Ou alors, tu nomme tes div un par un automatiquement et tu les appelles...

31 oct. 2005, 15:28

Non! Ça n'est pas ça du tout

!

Je veut que ça puisse fonctionner en faisant simplement:
*.html

Code : Tout sélectionner

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

Ce que je demande c'est que la fonction bordure soit identifiée dans les pages
html par la présence de l'attribut td ou div avec la valeur bouton dans la balise.
Cette fonction dois être gérée exclusivement dans le *.js. Donc du coté client
en Javascript.

Je ne pense pas pouvoir être beaucoups plus clair. Si je pose la question c'est
justement pour éviter d'utiliser des évenement onmousedown, onmouseup et
onmouseout dans la page XHTML Strict

...

Quelqu'un d'autre ma proposer une fonction pour gerer div ou td, mais elle
n'était actif que sur div

...

Code : Tout sélectionner

function getDivOrTd() { 
   divs = document.getElementsByTagName('div'); 
   tds  = document.getElementsByTagName('td'); 
   for(i = 0 ; i < tds.length ; i++) { 
      divs[divs.length] = tds[i]; 
   } 
   return divs; 
}

31 oct. 2005, 15:29

Non! Ça n'est pas ça !

Je veut que ça puisse aussi fonctionner en faisant simplement:
*.html
Code : Tout sélectionner
<div class="bouton"><a href="index.php">Acceuil</a></div>
Ce que je demande c'est que la fonction bordure soit identifiée dans les pages
html par la présence de l'attribut td ou div avec la valeur bouton dans la balise.
Cette fonction dois être gérée exclusivement dans le *.js. Donc du coté client
en Javascript.

Je ne pense pas pouvoir être beaucoups plus clair. Si je pose la question c'est
justement pour éviter d'utiliser des évenement onmousedown, onmouseup et
onmouseout dans la page XHTML Strict ...

Personnellement je vois très mal ce que tu veux faire...enfin, là je commence à comprendre un peu mieux

:
tu veux pouvoir modifier toute la class des div d'un coup sans toujours tout retaper
Là tout ce que j'ai proposé est executé client...seul le php ne l'est pas. T'as vu du php quelque part ?

Normalement tu peux chopper le div avec

Code : Tout sélectionner

document.body.getElementsByTagName("DIV");

Ca fonctionne avec :
A, ACRONYM, ADDRESS, APPLET, AREA, B, BASE, BASEFONT, BDO, BGSOUND, BIG, BLOCKQUOTE, BODY, BR, BUTTON, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, CUSTOM, DD, DEL, DFN, DIR, DIV, DL, document, DT, EM, EMBED, FIELDSET, FONT, FORM, FRAME, FRAMESET, HEAD, hn, HR, HTML, I, IFRAME, IMG, INS, KBD, LABEL, LEGEND, LI, LINK, LISTING, MAP, MARQUEE, MENU, OL, P, PLAINTEXT, PRE, Q, S, SAMP, SCRIPT, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TITLE, TR, TT, U, UL, VAR, XMP

EDIT : y'a aussi sa variante

Code : Tout sélectionner

document.body.all.tags("DIV");

31 oct. 2005, 15:47

Je veux chopper comme tu dis les td et les div
ayant un: .className==bouton
et ceci dans la même fonction : function bordure(bouton)

!

*.js

Code : Tout sélectionner

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

La fonction actuel ne peut prendre en charge que td si je met
TagName('td'), ou div si je met TagName('div').
Moi je veut que la fonction prenne en charge td et div en même
temps

!

31 oct. 2005, 15:49

tu fait un tableau avec div et td

31 oct. 2005, 15:51

Code : Tout sélectionner

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 
  } 
 } 
 boutonElements=document.getElementsByTagName('DIV') 
  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')};

si le problème c'est que tu veux faire les deux et pas l'un ou l'autre, tu lance deux opérations

31 oct. 2005, 16:35

Bravo! Ça fonctionne =D> !

J'avais essayé cette solution mais je m'était planté dans les accolades

!

Du coup sur le même principe on peut rendre utilisable la fonction bouton
bordure Inset pour les version d'Internet Explorer ne supportant pas les
style css hover et active avec a, div et td

!

Du tout bon

!

*.css

Code : Tout sélectionner

.bouton { background:#FAEA92 url(bgbtyr.jpg); border:4px outset; color:#FFFFFF; }
td.bouton,a.bouton { padding:1px; border-color:white; }

*.js

Code : Tout sélectionner

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 
  } 
  } 
  boutonElements=document.getElementsByTagName('div') 
  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 
  } 
  } 
  boutonElements=document.getElementsByTagName('a') 
  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')};

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

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

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

Merci PRoGRaFLaSH

!

Problème Résolu donc

!

01 nov. 2005, 18:22

Quelqu'un d'autre ma proposé une version plus courte en utilisant le selecteur universel '*' :

Code : Tout sélectionner

function bordure(bouton) 
{ 
  boutons=document.getElementsByTagName('*') 
  for(b=0;b<boutons.length;b++){ 
  if(boutons[b].className==bouton){ 
  boutons[b].onmousedown=function(){this.style.borderStyle='inset';} //Activé 
  boutons[b].onmouseup=function(){this.style.borderStyle='outset';} //Relaché 
  boutons[b].onmouseout=function(){this.style.borderStyle='outset';} //Hors zone 
  } 
 } 
} 
window.onload = function(){bordure('bouton')};

La question que je me pose, quel sont les dés/avantages du sélecteur universel ('*')
par rapport à la solution de PRoGRaFLaSH en terme de charge processeur

???

01 nov. 2005, 18:55

Quelqu'un d'autre ma proposé une version plus courte en utilisant le selecteur universel '*' :
Code : Tout sélectionner
function bordure(bouton) { boutons=document.getElementsByTagName('*') for(b=0;b<boutons.length;b++){ if(boutons[b].className==bouton){ boutons[b].onmousedown=function(){this.style.borderStyle='inset';} //Activé boutons[b].onmouseup=function(){this.style.borderStyle='outset';} //Relaché boutons[b].onmouseout=function(){this.style.borderStyle='outset';} //Hors zone } } } window.onload = function(){bordure('bouton')};
La question que je me pose, quel sont les dés/avantages du sélecteur universel ('*')
par rapport à la solution de PRoGRaFLaSH en terme de charge processeur ???

aucune, javascript étant executé côté client

01 nov. 2005, 19:07

Donc avec un code plus court et ('*'), la fonction serait plus rapide

?

fonction bordure avec <td>, <div> (et <a>)

Qui est en ligne