Discussion :

[vaneck]

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

Code :

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

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 :

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

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 :

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

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 :

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

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 :

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

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 :

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

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 :

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

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 :

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
{
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]

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.