Appel d'une fonction par un évenement

Version imprimable

bonjour
J'aimerais appeler une fonction avec un argument spécifique pour chaque evenement:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
for (var no=0; no <=2; no++)
{
  presentation.getElementsByTagName("img")[no].onmouseover = on(no);
// ceci ne marche pas car je ne peux pas faire d'appel a une fonction , mais seulement référence!
}

function on(ref)
{
   presentation.getElementsByTagName("img")[ref].setAttribute("id", "transparent");
     presentation.getElementsByTagName("p")[ref+1].setAttribute("id", "evidence");
}

Un conseil?

Oui, tu peux faire référence à une fonction au lieu de l'exécuter :

Code:

1
2
3
4
5
6
for (var no=0; no <=2; no++) {
  presentation.getElementsByTagName("img")[no] = function() {
    this.setAttribute("id", "transparent");
    presentation.getElementsByTagName("p")[no+1].setAttribute("id", "evidence");
  };
}

Si ça ne fonctionne toujours pas, tu peux ajouter la valeur de ref à ton élément HTML :

Code:

1
2
3
4
5
6
7
8
9
for (var no=0; no <=2; no++) {
  var image = presentation.getElementsByTagName("img")[no];
  image.onmouseover.ref = no;
  image.onmouseover = function() {
    var ref = this.ref;
    this.setAttribute("id", "transparent");
    presentation.getElementsByTagName("p")[ref+1].setAttribute("id", "evidence");
  };
}

J'avoue ne pas trop bien comprendre la premiere. Ca ne serait pas plutot
Code:

1 2 3 4 5 6 7 for (var no=0; no <=2; no++) { presentation.getElementsByTagName("img")[no].onmouseover = function() { this.setAttribute("id", "transparent"); presentation.getElementsByTagName("p")[no+1].setAttribute("id", "evidence"); }; }
Quand a la deuxieme ca ne marche pas . je continue toujours a chercher pourquoi.

Bonjour,
plusieurs remarques

Code:

presentation.getElementsByTagName("img")

est a mettre en dehors de la boucle, inutile de récupérer à chaque fois la même chose

Pourquoi changer l'ID sur un événement mouseover ou mouseout, il est préférable de jouer avec la className

Pour la récupération du P[ref+1] il est préférable de la faire à l'initialisation de la fonction plutôt que de le faire sur chaque mouseover.

Pour la deuxième proposition de loceka, il y a un onmouseover de trop
Code:

1 2 3 4 5 6 7 8 9 10 for (var no=0; no <=2; no++) { var image = presentation.getElementsByTagName("img")[no]; // image.onmouseover.ref = no; //-> ERREUR ICI image.ref = no; image.onmouseover = function() { var ref = this.ref; this.setAttribute("id", "transparent"); presentation.getElementsByTagName("p")[ref+1].setAttribute("id", "evidence"); }; }
en gros cela peut donner cela
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 var oImg, tImg = presentation.getElementsByTagName("IMG"); var tPara = presentation.getElementsByTagName("P"); var i, nbImg = tImg.length; for( i=0; i < nbImg; i++){ oImg = tImg[i]; // stocke le P oImg.ref = tPara[i +1]; oImg.onmouseover = function(){ // j'ai un doute sur l'utlisation de l'ID this.setAttribute("id", "transparent"); this.ref.setAttribute("id", "evidence"); }; }
mais j'ai un doute sur la finalité...

Un grand merci pour ta réponse élégante NoSmoking.
Pour shematisez grossierement, l'objectif est de surligner une image et son texte associé a l'autre bout de l'ecran quand la sourie glisse sur l'un des élément (et le faire disparaitre quand la sourie sort).
Voici le code final (les animations etant géré par css3) :

Code:

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
{
var presentation = document.getElementById("presentation");
var oImg, tImg  = presentation.getElementsByTagName("IMG");
var oPara, tPara = presentation.getElementsByTagName("P");
var i, p;
for( i=0; i <= 2; i++){
 
  oImg  = tImg[i];
  oImg.ref = tPara[i +1];
  oImg.onmouseover = function(){
    this.setAttribute("id", "transparent");
    this.ref.setAttribute("id", "evidence");
  };
 
  oImg.onmouseout = function(){
    this.removeAttribute("id");
    this.ref.removeAttribute("id");
  }
 
  p = i+1;
  oPara  = tPara[p];
  oPara.ref = tImg[i];
  oPara.onmouseover = function(){
    this.setAttribute("id", "evidence");
    this.ref.setAttribute("id", "transparent");
  };
 
  oPara.onmouseout = function(){
    this.removeAttribute("id");
    this.ref.removeAttribute("id");
  }
}
 
}

16/05/2011, 09h45
Loceka

Citation:

Envoyé par NoSmoking

Pour la deuxième proposition de loceka, il y a un onmouseover de trop

Un de trop dans le 2ième code, un qui manque dans le premier, au total ça s'équilibre. :aie:

Désolé, j'ai posté ça juste avant de partir vendredi soir et j'ai pas pris le temps de me relire.