Transmettre une variable dans une fonction

Version imprimable

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

Code:

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

19/11/2013, 18h04
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:

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:

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].
19/11/2013, 18h54
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()

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

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); }); });
Citation:

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:

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.

20/11/2013, 12h21
NoSmoking

Bonjour,
pourquoi ne pas passer par les data :fleche: .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.
20/11/2013, 14h01
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.

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

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:

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

sans oublier le mot magique var pour les déclarations

20/11/2013, 15h34
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.

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

Citation:

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:

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

21/11/2013, 08h16
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