IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

onclick changement image


Sujet :

JavaScript

  1. #1
    Membre confirmé
    Homme Profil pro
    Étudiant
    Inscrit en
    Juin 2010
    Messages
    58
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 34
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Juin 2010
    Messages : 58
    Par défaut onclick changement image
    Bonjour,

    J'ai un soucis avec un onclick, il ne veut pas changer d'image :/

    J'ai une page .jsp avec une image :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <img style="right:0px;position:absolute;" class="img_info" src="img/icone_info2.png" onmouseover="this.src='img/icone_info.png'" onmouseout="this.src='img/icone_info2.png'" onclick="Affiche_OBJ('bloc_i<%=i%>_j<%=j%>'),this.src='img/icone_info.png'"/>
    Quand je passe dessus une image apparait, quand je pars l'image redeviens a la normal. Et j'aimerais quand quand je click dessus cela me fasse apparaitre un div (ma fonction marche) mais aussi que l'image reste comme si j'étais en mouseover. alors j'ai testé de mettre dans le onclick :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    this.src='img/icone_info2.png'
    et j'ai aussi essayé de le faire dans ma fonction Affiche_OBJ mais sans succès :/

    Merci d'avance pour vos aident

  2. #2
    Rédacteur/Modérateur
    Avatar de andry.aime
    Homme Profil pro
    Inscrit en
    Septembre 2007
    Messages
    8 391
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Ile Maurice

    Informations forums :
    Inscription : Septembre 2007
    Messages : 8 391
    Par défaut
    Bonjour,

    onclick="Affiche_OBJ('bloc_i<%=i%>_j<%=j%>'),this.src='img/icone_info.png'"
    ";" entre les instructions mais pas ",".

    A+.

  3. #3
    Membre Expert
    Avatar de RomainVALERI
    Homme Profil pro
    POOête
    Inscrit en
    Avril 2008
    Messages
    2 652
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 48
    Localisation : France, Meurthe et Moselle (Lorraine)

    Informations professionnelles :
    Activité : POOête

    Informations forums :
    Inscription : Avril 2008
    Messages : 2 652
    Par défaut
    Il faudra peut-être aussi, en fonction du rendu final souhaité, que tu désactives le mouseout de l'élément tant que la souris survole le div qui apparait sur ton click, pour le réactiver en sortie. Est-ce clair ?

  4. #4
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 198
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 198
    Par défaut
    Bonjour,
    à l'affichage de la DIV tu annules l'action sur le mouseout, en ayant pris soin de la sauvegarder pour le cas où.

  5. #5
    Membre confirmé
    Homme Profil pro
    Étudiant
    Inscrit en
    Juin 2010
    Messages
    58
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 34
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Juin 2010
    Messages : 58
    Par défaut
    Merci pour toutes vos réponses

    Bon alors j'ai supprimé le mouseover et le mouseout et dans ma fonction affiche objet j'ai le changement d'image lorsque je click
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    function Affiche_OBJ(nameDIV,nameIMG){
    	if (document.getElementById(nameDIV).style.display == 'block')
    	{ 
    		document.getElementById(nameDIV).style.display = 'none';
    		document.getElementById(nameIMG).src='img/icone_info2.png';
    	} 
    	else 
    	{
    		document.getElementById(nameDIV).style.display = 'block'; 
    		document.getElementById(nameIMG).src='img/icone_info.png';
    	} 
    };
    après j'ai essayer de remettre le mouseover et mouseout mais du coup lorsque je click sur l'image elle ne reste pas :/

    Donc pour le moment j'ai supprimé le mouseover et mouseout pour que lorsque l'utilisateur clik l'image reste changé

  6. #6
    Invité
    Invité(e)
    Par défaut
    et si tu declarait une variable globale qui contiendrait l'adresse de l'image quand on est onmouseout et que tu modifirais quand on clic par l'adresse de l'image que l'on a en onmouseover

    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
     
     
    var monimage=monimage='img/icone_info2.png';
     
    function Affiche_OBJ(nameDIV,nameIMG){
    	if (document.getElementById(nameDIV).style.display == 'block')
    	{ 
    		document.getElementById(nameDIV).style.display = 'none';
    		monimage='img/icone_info2.png';
    	} 
    	else 
    	{
    		document.getElementById(nameDIV).style.display = 'block'; 
    		monimage='img/icone_info.png';
    	} 
    }

  7. #7
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 198
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 198
    Par défaut
    dans la fonction d'affichage, tu passes en paramètre l'élément déclencheur et l'ID du div à afficher
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    function Affiche_OBJ( obj, id_div){
    ....
    }
    dans ton cas l'appel deviendra
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    onclick="Affiche_OBJ( this, 'bloc_i<%=i%>_j<%=j%>');"
    dans la fonction il faut inhiber le mouseout, mais en garder trace pour restauration ultérieure
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    function Affiche_OBJ( obj, id_div){
      obj.savMouseOut = obj.onmouseout;           // sauvegarde evenement par surchage
      obj.onmouseout = function(){return(false)}; // inhibe evenement
      var oDiv = document.getElementById( id_div);
      oDiv.parentClick = obj;                     //on garde pour plus tard
      if( oDiv){
        if( oDiv.style.display == 'block'){ 
          oDiv.style.display = 'none';
        }
        else {
          oDiv.style.display = 'block'; 
        }
      }
    }

  8. #8
    Membre confirmé
    Homme Profil pro
    Étudiant
    Inscrit en
    Juin 2010
    Messages
    58
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 34
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Juin 2010
    Messages : 58
    Par défaut
    Bonjour à vous,
    Merci pour votre aide

    Bon alors on se rapproche

    maintenant le onmouseover et onmouseout fonctionne très bien et lorsqu'e je clik mon div caché apparait et l'image change mais lorsque je re-click sur l'image le div disparait mais l'image ne se remet pas à sa forme d'origine :/

    voici le code que j'ai : (fichier js)

    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
    function Affiche_OBJ(nameDIV,nameIMG,obj)
    {
    	obj.savMouseOut = obj.onmouseout;         
    	obj.onmouseout = function()
    	{
    		return(false);
    	};
    	var oDiv = document.getElementById(nameDIV);
    	  oDiv.parentClick = obj;                  
    	  if( oDiv)
    	  {
    	    if( oDiv.style.display == 'block')
    	    { 
    	      oDiv.style.display = 'none';
    	    }
    	    else 
    	    {
    	      oDiv.style.display = 'block'; 
    	    }
    	  }
    };
    et celui dans mon fichier .jsp :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <img style="right:0px;position:absolute;height:23px;width:25px;" onmouseover="this.src='img/icone_info.png'" onmouseout="this.src='img/icone_info2.png'" id="img_info_i<%=i%>_j<%=j%>" src="img/icone_info2.png" onclick="Affiche_OBJ('bloc_i<%=i%>_j<%=j%>','img_info_i<%=i%>_j<%=j%>',this)"/>

  9. #9
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 198
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 198
    Par défaut
    Citation Envoyé par charles888
    Bon alors on se rapproche

    maintenant le onmouseover et onmouseout fonctionne très bien et lorsqu'e je clik mon div caché apparait et l'image change mais lorsque je re-click sur l'image le div disparait mais l'image ne se remet pas à sa forme d'origine :/
    cela ce précise...

    donc résumons
    - sur le 1st click la DIV apparaît et l'image reste fixe
    - sur le 2nd click la DIV disparaît et l'image reprend son fonctionnement normale

    cela implique qu'il y a 3 événements à modifier, onclick, onmouveover et onmouseout et non 1 seul comme nous l'avons fait.

    on peut faire l'approche suivante, un peu différente
    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
    function fnClick( obj, id_div){
      // get element a afficher/masquer
      var oDiv = document.getElementById( id_div);
      // affiche la DIV
      oDiv.style.display = 'block';
      // sauvegarde des evenements
      if( !obj.saveEvent){
        obj.saveEvent = {
          over : obj.onmouseover,
          out : obj.onmouseout,
          click : obj.onclick
        }
      }
      // redefini les evenements
      obj.onmouseout = function(){};
      obj.onmouseover = function(){};
      obj.onclick = function(){
        // restaure les evenements
        this.onmouseout = this.saveEvent.out;
        this.onmouseover = this.saveEvent.over;
        this.onclick = this.saveEvent.click;
        // masque la DIV
        oDiv.style.display = 'none';
      };
    }
    la fonction à perdu son nom car on est loin d'un simple affichage/masquage, mais l'appel reste identique à celui que je t'avais donné
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    onclick = "fnClick( this, 'bloc_i<%=i%>_j<%=j%>');"

  10. #10
    Membre confirmé
    Homme Profil pro
    Étudiant
    Inscrit en
    Juin 2010
    Messages
    58
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 34
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Juin 2010
    Messages : 58
    Par défaut
    Bonjour,

    Désolé de ne pas avoir répondu plus tôt mais c'était le week end =)

    Je viens de tester ton code NoSmoking et c'est niquel pil ce qui correspond.

    Un grand merci a vous =)

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Changement image selon la langue
    Par ptityop dans le forum Langage
    Réponses: 1
    Dernier message: 03/04/2009, 09h10
  2. Changement Image ds tImage
    Par GillesT60 dans le forum Composants VCL
    Réponses: 2
    Dernier message: 25/09/2008, 14h12
  3. changement image suivant clic
    Par chartoire dans le forum Général JavaScript
    Réponses: 8
    Dernier message: 10/11/2007, 21h59
  4. Changement image de background sur balise id
    Par fmd92 dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 06/04/2007, 18h00
  5. [HTML][débutante] Map ou Onclick sur image ? Différent ?
    Par khany dans le forum Balisage (X)HTML et validation W3C
    Réponses: 4
    Dernier message: 08/12/2004, 14h05

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo