Evènement OnmouseDown/Up: bordure Inset/Outset dans un *.js

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

Code:

---

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

Code:

---

1 2 3 4 5

function bouton(id) { onmousedown.style.borderStyle='inset'; onmouseup.style.borderStyle='outset'; }

---

Quelqu'un pourrait m'aider ?

Merci d'avance :) !

Citation:

---

Envoyé par Lareine

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?

Oui, c'est ça :P !!!

Citation:

---

Envoyé par Lareine

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

---

Ben c'est pas possible :D

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:

---

1 2 3

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

---

Bonne chance :)

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

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

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

Code:

---

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

avec le setAttribute:

Code:

---

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 :idea:
utiliser le css et le hover de la balise a ...

Merci de ta réponse :P ...

hover ne foctionne pas dans td malheureusement :oops: ...

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

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

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

compatible ie :) ?

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

Code:

---

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:

---

1 2 3

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

---

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

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

Code:

---

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

---

Donc est ce que je peut faire:

Code:

---

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:

---

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

---

Ca serais correct comme ça :? ?

oulà que nenni !!!

Code:

---

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

---

Code:

---

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:

---

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

---

Code:

---

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

---

Oky! Je pige l'astuce :P !

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

Code:

---

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 :) ?

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

Citation:

---

Envoyé par SpaceFrog

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:

---

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 :P ...
Merci Grenouille Spacial :bravo: !
Sinan j'ai essayée de faire fonctionner en remplaçant:

Code:

---

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

---

dans le fichier externe. J'ai essayé:

Code:

---

window.onload = bordure;

---

et

Code:

---

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 ?

Citation:

---

Envoyé par Lareine

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:

---

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

---

ou

Code:

---

1 2 3

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

---

Ca devrait le faire :wink:

Code:

---

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:

---

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:

---

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

---

Fonctionne parfaitement sous IE, Opera et Firefox :P

Merci beaucoup pour ton aide denisC :bravo: !

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

Code:

---

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

---

C'est ça :? ?

Citation:

---

Envoyé par Lareine

Ne fonctionne pas avec IE :? ...

---

Je pense qu'il suffit de rajouter un test:

Code:

---

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

Citation:

---

Envoyé par Lareine

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