Discussion :

[Invité]

Bonjour,
voici mon code.
Comment passer la variable "originalsrc" dans la deuxième fonction ?

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
$(function () 
{
  $("#bouton_exploit img").hover(function(){
    var idname = $(this).attr('id');
    var originalsrc = this.getAttribute('src');
    $("#" + idname).attr('src', mesimagesover[idname]);
  }),
  $("#bouton_exploit img").mouseout(function(originalsrc){
    alert(originalsrc);
    var idname = $(this).attr('id');    
    $("#" + idname).attr('src', originalsrc);
  });
});

Merci

[Kaamo]

Toutes variables définies avec var dans une fonction n'est disponible qu'à l'intérieur de la fonction.
Déclare originalsrc un niveau au dessus, en dehors de la première fonction et tu y auras accès à l'intérieur de tes deux fonctions. Aussi, ne le passe pas en paramètre d'une des deux fonctions ! Tu vas écraser ta variable dans la deuxième fonction sinon.

Code javascript :

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

1
2
3
$("#bouton_exploit img").mouseout(function(originalsrc){
  /* ton code */
});

La partie en rouge ci-dessus, est une fonction de rappel (callback). Elle sera appelée, lors de l'événement, dans un contexte qui lui donnera en premier argument un objet MouseEvent.

Imagine que tu donnes un nom à cette fonction, par exemple toto. Quand l'événement aura lieu, elle sera appelée ainsi en très gros :

Code javascript :

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

1
2
3
// du code qui permet de créer un objet MouseEvent. par exemple :
var event = new MouseEvent()
toto(event); // on appelle ta fonction avec cet événement en premier argument

originalsrc aura donc la valeur de cet event. C'est pourquoi alert(originalsrc)te renvoie [object MouseEvent].

[Invité]

Je ne peux pas la déclarer plus haut car a ce moment il n'y a aucune info.
c'est quant tu passes sur une image que cette variable récupère le src d'origine.
J'entends pas origine le src qui est écrit en dur dans le <img ...>.
En effet cette image peux avoir été modifier, car j'ai une autre fonction qui remplace l'attribut src quand tu clics sur l'image.
pour le reste j'ai pas tout compris sur l'utilisation : new MouseEvent()

[Kaamo]

si tu peux, déclarer plus haut la variable. Pas forcément lui donner une valeur

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
$(function () {
  var originalsrc;
  $("#bouton_exploit img").hover(function(){
    var idname = $(this).attr('id');
    originalsrc = this.getAttribute('src');
    $("#" + idname).attr('src', mesimagesover[idname]);
  }),
  $("#bouton_exploit img").mouseout(function(){
    alert(originalsrc); // ok, ce n'est plus un MouseEvent
    var idname = $(this).attr('id');    
    $("#" + idname).attr('src', originalsrc);
  });
});

j'ai pas tout compris sur l'utilisation : new MouseEvent()

Ce qu'il y a à retenir, c'est que quand tu passes une fonction qui doit se déclencher durant un événement :

Code javascript :

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

1
2
3
$("#bouton_exploit img").mouseout(function(event){
  /* ton code */
});

le premier paramètre de la fonction est un objet MouseEvent.
Dis toi que cette fonction (en rouge) va s'exécuter durant l'événement mouseout.
Comment on exécute une fonction ? Comme ceci, à l'aide des parenthèses () : nom_fonction().

mouseout (et tous les événements) vont appeler ta fonction (en rouge), en lui mettant en premier argument un objet "événement" nom_fonction(evenement) que tu peux donc utiliser dans ta fonction.

Retiens simplement que le premier paramètre quand tu définis ce genre de fonction est un événement.

[NoSmoking]

Bonjour,
pourquoi ne pas passer par les data .data().
- sur le hover on stock, dans les data, l'image affichée puis on affiche la nouvelle image
- sur le out on restaure l'image stockée dans les data.

[Invité]

je m'arrache les cheveux avec cette histoire.
Voici ou j'en suis : http://codepen.io/topheur/pen/JCvtL
l'image du hover reste et non pas l'image d'origine.
En plus l'image cliqué aussi passe en hover alors qu'il faudrait pas.

Qu'elle prise de tête.

[NoSmoking]

De e que je vois il te vaut mieix passer par mouseenter et mouseleave et de faire un truc dans ce genre

Code :

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

1
2
3
4
5
6
7
8
9
10
$(function () {
  $("#bouton_exploit img").mouseenter(function(){
    var idname = $(this).attr('id');
    $(this).data('original', $(this).attr('src'));
    $(this).attr('src', mesimagesover[idname]);
  }),
  $("#bouton_exploit img").mouseleave(function(){
    $(this).attr('src', $(this).data('original'));
  });
});

Autre remarque concernant la(es) déclaration(s) de ton(es) "Array" mesimagesover, tu crées en fait un objet alors autant écrire

Code :

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

var mesimagesover = {};//new Array();

sans oublier le mot magique var pour les déclarations

[Invité]

Merci pour ce retour, en effet il y a du mieux, mais je note un pb et pas des moindres.
Quand on clic sur un des boutons, il ne prend plus sont été vert foncé, mais reste vert claire.
Et quand on clic sur un deuxième bouton, c'est l'image du bouton précédement cliqué qui change et affiche l'image du hover.
Quelle prise de tête, ca fait trois jours que je suis dessus, je n'arrive pas a m'en sortie.

[NoSmoking]

je n'avais pas regardé la deuxième partie qui soit dit en passant doit se trouver également dans $(function () {}

Quand on clic sur un des boutons, il ne prend plus sont été vert foncé, mais reste vert claire.

quand tu cliques sur l'image un HOVER à été déclenché de plus ton approche en modifiant les valeurs des tes "tableaux" d'images ne me semble pas la bonne.

Tu pourrais faire simplement

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
35
36
$(function () {
  var $liste = $("#bouton_exploit img");
 
  $liste.mouseenter(function(){
    var idname = $(this).attr('id');
    $(this).data('original', $(this).attr('src'));
    $(this).attr('src', mesimagesover[idname]);
  }),
 
  $liste.mouseleave(function(){
    $(this).attr('src', $(this).data('original'));
  });
 
  //--- changement image si cliqué
  $liste.on('click' ,function () {
    // On fait la RAZ
    if( curseur != "") {
      // restaure image originale
      $("#" + curseur).attr('src', mesimagesori[curseur])
      // raz panneau
      $("#fleche" ).animate({ margin: mesfleches[curseur] });
      $("#texte_" + curseur + "_main").slideUp();
    }
    // On s'occupe du nouvel élément cliqué
    curseur = $(this).attr('id');
    // affecte l'image ON
    $(this).attr('src', mesimages[curseur]);
    //  sauve la nouvelle valeur pour le OUT
    $(this).data('original', $(this).attr('src'));
    // on s'occupe du panneau
    $("#fleche" ).animate({ margin: mesfleches[curseur] });
    $("#texte_" + curseur + "_main").slideDown("slow");
  });
 
  $("#demarche").trigger("click");
});

[Invité]

Avec mes remerciements, je ne pensai pas voir la fin de se truc.
Reste à ajouter une fonction de transition entre le hover et l'autre image (.fadtoggle()) et c'est parfait