Appel d'une fonction par un évenement [Résolu]

[vaneck]

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?

[Loceka]

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

[vaneck]

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.

[NoSmoking]

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

[vaneck]

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

[Loceka]

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.

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