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.