Discussion :

[Lillie CHARLOTTE]

Bonjour,

Je débute en javaScript et J'aimerais appeler cette fonction javascript :

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
function bordure(bouton){ 
  boutons=document.getElementsByTagName('td') 
  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 
  } 
  } 
  boutons=document.getElementsByTagName('div') 
  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 
  } 
  } 
  boutons=document.getElementsByTagName('a') 
  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 
  } 
  } 
  boutons=document.getElementsByTagName('img') 
  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')};

à partir de deux classe css différentes :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
.bouton { background:transparent; border:4px outset; border-radius: 0.625em; } 
div.bouton,a.bouton,img.bouton { border-color:white; padding:0.125em 0.25em;  }
 
.btnrub { background:transparent; border:4px outset; border-radius: 1em; } 
div.btnrub,a.btnrub,img.btnrub { border-color:white;}

Est-ce possible ?

Si oui avec quel avec quel contraintes et quel syntaxe ?

[Bovino]

Tu cherches quoi exactement ?
Appliquer ta fonction aux éléments possédant au moins une des classes, sur ceux ayant les deux ou sur une classe sachant que l'élément ciblé possède aussi une autre classe ?

[Lillie CHARLOTTE]

Bonjour Bovino,

Voici la page que je travaille:
http://ippai.free.fr/materiel-papiers.php

J'aimerais pouvoir utiliser 2 class de boutons en même temps sur la même page :
Sur les boutons de rubriques principale img, sans padding
et sur des boutons de sous rubrique href, avec un padding de 2 et 4px.

Et avoir l'animation inset outset sans bug.
Quand j'ai tenté de modifié le script, en remplaçant bouton par : bouton,btnrub
Les images des gros boutons se détachaient de la page, je n'ais donc pas due utiliser la bonne syntaxte !

[SylvainPV]

Simplement comme ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

window.onload = function(){ bordure('bouton') bordure('btnrub'); };

Si tu es obligé d'appeler deux fois la fonction, ça vient de ta condition:
if(boutons[b].className==bouton){La fonction est prévue pour tester simplement la valeur de l'attribut "class". C'est pas pratique du tout car si on met juste une classe de plus (class="bouton truc" par exemple), même si elle n'a aucun rapport, le code ne fonctionnera plus. Mieux vaudrait utiliser if(boutons[b].classList.contains(bouton)){.

Pour ce genre de fonctions, utiliser jQuery simplifierait beaucoup de choses.

[Lillie CHARLOTTE]

Merci de ta réponse SylvainPV,

Du coups plus souple de rajouter un seconde fonction ?

Code JS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
function bordrub(btnrub){ 
   btnrubs=document.getElementsByTagName('img') 
  for (r=0;r<btnrubs.length;r++){ 
  if(btnrubs[r].className==btnrub){ 
  btnrubs[r].onmousedown=function(){this.style.borderStyle='inset';} //Activé 
  btnrubs[r].onmouseup=function(){this.style.borderStyle='outset';} //Relaché 
  btnrubs[r].onmouseout=function(){this.style.borderStyle='outset';} //Hors zone 
  } 
 } 
 
function bordure(bouton){ 
  boutons=document.getElementsByTagName('td') 
  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 
  } 
  } 
  boutons=document.getElementsByTagName('div') 
  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 
  } 
  } 
  boutons=document.getElementsByTagName('a') 
  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 
  } 
  } 
  boutons=document.getElementsByTagName('img') 
  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'); bordrub('btnrub');  };

mais dans ce cas j'ai un joli bug sur les bouton image qui reste accroché au cursseur.

[Auteur]

bonjour,

un point important : déclare tes variables !