Discussion :

[Lareine]

Alors voilà j'utilise dans mes page des évenement javasript pour
animer les bordure d'un tableau au passage de la souris ...

Code :

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

1
2
3
<td 
onmousedown="this.style.borderStyle='inset'" 
onmouseup="this.style.borderStyle='outset'">

Mais j'aimerais inclure tout çà dans un fichier externe *.js

et utiliser id="bouton" pour appeler la fonction :o ...

problème je ne sais pas du tout comment réécrire ça
en script javascript !

Code :

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

1
2
3
4
5
function bouton(id) 
{ 
onmousedown.style.borderStyle='inset'; 
onmouseup.style.borderStyle='outset'; 
}

Quelqu'un pourrait m'aider ?

Merci d'avance !

[denisC]

et utiliser id="bouton" pour appeler la fonction :o ...

Tu peux préciser ce que tu cherches à faire? Tu veux que toutes les cases ayant id="bouton" aient le même comportement que ci-dessus? En utilisant un fichier .js externe? C'est bien ça?

[Lareine]

Oui, c'est ça !!!

[denisC]

et utiliser id="bouton" pour appeler la fonction :o ...

Ben c'est pas possible

Non, je rigole ^^

Il y a effectivement une partie qui n'est pas possible, c'est d'affecter un même id a deux élements HTML. Par définition un id doit être unique.
Après, tu peux trouver d'autres solutions.
Par exemple la affecter un attribut class (ou tout autre attribut mais pas id).

Ensuite, il te faudra retrouver tous tes élements (a coup de getElementsByTagName('td')) et vérifier td par td si tu dois lui appliquer le style onmousedown/onmouseup ci-dessus (en fonction de l'attribut défini ci dessus).

Tu dois faire une fonction qui fait tout ça dans ton fichier .js et l'appeller au chargement de la page, soit en mettant ça dans le onload du body soit en faisant une commande du style:

Code :

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

1
2
3
 
window.attachEvent('onload',maFonctionPourAppliquerLesStyles); //IE
window.addEventListener('load',maFonctionPourAppliquerLesStyles,false); //FFx et W3C

Bonne chance

[SpaceFrog]

avec un setAttribute ...
mais bon toujours lancé dans le onload ..

[Lareine]

Le gros merdier déjà il faut un script different entre IE et Firefox ...
et ça marchera sous Mac ?

Bon voilà ce que j'ai rédigée pour l'instant :/ ...

Code :

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

1
2
3
4
5
6
7
8
9
function bouton(class) 
{ getElementsByTagName('td')
window.attachEvent
('onload',onmousedown.style.borderStyle='inset';onmouseup.style.borderStyle='outset';); //IE 
 
 
window.addEventListener
('load',onmousedown.style.borderStyle='inset';onmouseup.style.borderStyle='outset';); //FFx et W3C 
}

je fais quoi avec setAttribute ?

Je précise que je n'y connais pas grand chose en script je
n'utilise pour l'instant que des évenement simple ...

[SpaceFrog]

avec le setAttribute:

Code :

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

1
2
3
4
document.getElementById('monobjet').setAttribute("onmouseover","this.style.borderStyle='inset';")
document.getElementById('monobjet').onmouseover=function(){this.style.borderStyle='inset';}
document.getElementById('monobjet').setAttribute("onmouseout","this.style.borderStyle='outset';")
document.getElementById('monobjet').onmouseout=function(){this.style.borderStyle='outset';}

il faut encore une fois doubler les instructions pur la compatibilité ...


autre solution
utiliser le css et le hover de la balise a ...

[Lareine]

Merci de ta réponse ...

hover ne foctionne pas dans td malheureusement ...

function bordure(class)
{

document.getElementById('bordure').setAttribute("onmouseover","this.style.borderStyle='inset';")
document.getElementById('bordure').onmouseover=function(){this.style.borderStyle='inset';}
document.getElementById('bordure').setAttribute("onmouseout","this.style.borderStyle='outset';")
document.getElementById('bordure').onmouseout=function(){this.style.borderStyle='outset';}

}

C'est ça ?

[SpaceFrog]

non hover ne focntionne pas dans un td mais parentNode.style oui ...
donc un a dans le td ... et tu modifies le style du parentNode

[Lareine]

comment çà un a dans td ?
Tu m'interesse !

compatible ie ?

[SpaceFrog]

pour la fonction pas besoin de passer un paramètre
ou alors passer l'objet qui doit recevoir le nouvel evenement dynamique ...

Code :

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

1
2
3
4
5
6
7
8
9
function addbordureevent(bordure)
{
 
document.getElementById('bordure').setAttribute("onmouseover","this.style.borderStyle='inset';")
document.getElementById('bordure').onmouseover=function(){this.style.borderStyle='inset';}
document.getElementById('bordure').setAttribute("onmouseout","this.style.borderStyle='outset';")
document.getElementById('bordure').onmouseout=function(){this.style.borderStyle='outset';}
 
}

un a dans un td ...

Code :

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

1
2
3
<td>
   <a onmouseover="this.parentNode.style.border='inset 2px '"  onmouseout="this.parentNode.style.border='outset 2px '">coucou</a>
</td>

[SpaceFrog]

heu ouaip pas tout a fait la possibilité d'utiliser le css la dessus ...

[Lareine]

Et en fait j'utilise déjà class pour définir le style par défaut dans css

Code :

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

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

Donc est ce que je peut faire:

Code :

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

1
2
3
4
5
6
7
8
9
function bordure(jsclass) 
{ 
 
document.getElementById('bordure').setAttribute("onmouseover","this.style.borderStyle='inset';") 
document.getElementById('bordure').onmouseover=function(){this.style.borderStyle='inset';} 
document.getElementById('bordure').setAttribute("onmouseout","this.style.borderStyle='outset';") 
document.getElementById('bordure').onmouseout=function(){this.style.borderStyle='outset';} 
 
}

Code :

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

<td class="bouton" jsclass"bordure"></td>

Ca serais correct comme ça ?

[SpaceFrog]

oulà que nenni !!!

Code :

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

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

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
 
function bordure(jsclass)
{
 
jsclassElements=document.getElementsByTagName('td')
 
for (i=0;i<jsclassElements.length;i++){
      if(jsclassElements[i].className==jsclass){
jsclassElements[i].setAttribute("onmouseover","this.style.borderStyle='inset';")
jsclassElements[i].onmouseover=function(){this.style.borderStyle='inset';}
jsclassElements[i].setAttribute("onmouseout","this.style.borderStyle='outset';")
jsclassElements[i].onmouseout=function(){this.style.borderStyle='outset';}
}
}

Code :

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

<td class="bouton" ></td>

Code :

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

<body onload="bordure('bouton');" >

[Lareine]

Oky! Je pige l'astuce !

Et dans le cas ou j'utilise dans la même page au milieu d'un texte:

Code :

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

1
2
3
a.bouton:active { border:4px inset; }
 
<a href="liens.html" class="bouton">voir ici</a>

ça ne risque pas d'entrer en conflit avec le javascript ?

[SpaceFrog]

ben dans ma boucle je teste les td ... pas les a

[Lareine]

function bordure(jsclass)
{

jsclassElements=document.getElementsByTagName('td')

for (i=0;i<jsclassElements.length;i++){
if(jsclassElements[i].className==jsclass){
jsclassElements[i].setAttribute("onmouseover","this.style.borderStyle='inset';")
jsclassElements[i].onmouseover=function(){this.style.borderStyle='inset';}
jsclassElements[i].setAttribute("onmouseout","this.style.borderStyle='outset';")
jsclassElements[i].onmouseout=function(){this.style.borderStyle='outset';}
}
}

Ça ne fonctionais pas, comme il manquait un } :o !
Sinan je préfère utiliser, onmousedown et onmouseup:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function bordure(bouton) 
{ 
 
boutonElements=document.getElementsByTagName('td','div') 
 
for (b=0;b<boutonElements.length;b++){ 
if(boutonElements[b].className==bouton){ 
boutonElements[b].setAttribute("onmousedown","this.style.borderStyle='inset';") 
boutonElements[b].onmousedown=function(){this.style.borderStyle='inset';} 
boutonElements[b].setAttribute("onmouseup","this.style.borderStyle='outset';") 
boutonElements[b].onmouseup=function(){this.style.borderStyle='outset';} 
} 
}
}

Ça fonctione Impec ...
Merci Grenouille Spacial !
Sinan j'ai essayée de faire fonctionner en remplaçant:

Code :

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

<body onload="bordure('bouton');" >

dans le fichier externe. J'ai essayé:

Code :

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

window.onload = bordure;

et

Code :

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

1
2
window.attachEvent('onload',bordure); //IE 
window.addEventListener('load',bordure,false); //FFx et W3C

Mais ça ne marche pas !?
Y'aurrais t'il une impossibilité avec les onload en *.js,
dans les td ?

[denisC]

Y'aurrais t'il une impossibilité avec les onload en *.js,
dans les td ?

Non, il n'y aucune impossiblité, simplement, il faut passer un argument à ta fonction...

Quelque chose du genre:

Code :

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

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

ou

Code :

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

1
2
3
 
window.attachEvent('onload', function(){bordure('bouton')}); //IE 
window.addEventListener('load', function(){bordure('bouton')},false); //FFx et W3C

Ca devrait le faire

[Lareine]

Code :

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

1
2
3
 
window.attachEvent('onload', function(){bordure('bouton')}); //IE 
window.addEventListener('load', function(){bordure('bouton')},false); //FFx et W3C

Ne fonctionne pas avec IE ...

Code :

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

1
2
3
 
window.addEventListener('load', function(){bordure('bouton')},false); //FFx et W3C
window.attachEvent('onload', function(){bordure('bouton')}); //IE

Ne fonctionne pas avec Firefox ...

Code :

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

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

Fonctionne parfaitement sous IE, Opera et Firefox

Merci beaucoup pour ton aide denisC !

Du coup je me demande si le doublement de ligne pour la compatibilité est vraiment necessaire !

Code :

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

1
2
...setAttribute("onmouseup","this.style.borderStyle='outset';") //Opera et ?
...onmouseup=function(){this.style.borderStyle='outset';} //Opera IE et FFx

C'est ça ?

[denisC]

Ne fonctionne pas avec IE ...

Je pense qu'il suffit de rajouter un test:

Code :

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

1
2
3
4
5
 
if (window.addEventListener)
window.addEventListener('load', function(){bordure('bouton')},false); //FFx et W3C
if (window.attachEvent)
window.attachEvent('onload', function(){bordure('bouton')}); //IE

Mais de toute façon, l'autre solution marche...

Du coup je me demande si le doublement de ligne pour la compatibilité est vraiment necessaire !

C'est pas forcément necessaire, mais ça ne fait pas de mal

PS: pense au tag