changement d'image onmouseover, onmouseout, événements onclick

Question

J'ai deux images dites, img1 et img2. Mon code:

function roll(id,img_name,event_name,img_id) 
 
{ 
 
    var state ; 
 
    if(event_name == 'mouseover') 
 
    { state = false;rollover();} 
 
    else if(event_name == 'mouseout') 
 
    {state = false;rollout();} 
 
    else if(event_name == 'onClick') 
 
    {alert(event_name);state = true;showdata(id,img_name,state);} 
 
    else 
 
    {showDIV(id);} 
 
    
 
    function rollover() 
 
    { 
 
     if(state == false) 
 
     { 
 
      var imgpath='image_file/'; 
 
      document[img_name].src =imgpath + img_name + '_over.png'; 
 
     } 
 
    } 
 
    function rollout() 
 
    { 
 
     if(state == false) 
 
     { 
 
      var imgpath='image_file/'; 
 
      document[img_name].src = imgpath + img_name + '.png'; 
 
     } 
 
    } 
 
    function showDIV(id) 
 
    { 
 
     var div = document.getElementById(id); 
 
\t  if (div.style.display != "none") 
 
\t  { 
 
\t \t  div.style.display = "none"; 
 
\t \t  document[img_name].src='downarrow.png'; 
 
    \t \t 
 
\t  } 
 
\t  else 
 
\t  { 
 
\t \t  div.style.display = "block"; 
 
\t \t  document[img_name].src='uparrow.png'; 
 
\t  } 
 
    } 
 
    function showdata(id,img_name,state,img_id) 
 
    {alert(state); 
 
     if(state == true) 
 
     { 
 
      var imgpath='image_file/'+ img_name; 
 
      var div = document.getElementById(id); 
 
\t   if (div.style.display != "none") 
 
\t   { alert('none' +state); 
 
\t    document.getElementsByName(img_name).src =imgpath + '.png'; 
 
\t \t   div.style.display = "none"; 
 
\t   } 
 
\t   else 
 
\t   { alert('block :' +state); 
 
\t    document.images[img_name].src='image_file/journey_icon_over.png'; 
 
\t \t   div.style.display = "block"; 
 
\t   } 
 
\t  } 
 
    } 
 
}

<tr> 
 
    <td valign="top" width="100%"> 
 
    <img id="img1" name="journey_icon" src="image_file/journey_icon.png" alt="Journey Report" onmouseover="roll('JourneyReport','journey_icon','mouseover')" onmouseout="roll('JourneyReport','journey_icon','mouseout')" onclick="roll('JourneyReport','journey_icon','onClick',this.id)" /> 
 
    <div id="JourneyReport" style="display:none;" class="divbackground"> 
 
    <uc1:ReportControl ID="JourneyControl" runat="server" /> 
 
    </div> 
 
    </td> 
 
    </tr>

l'exigence est que, j'ai besoin img1 sur mouseover et img2 sur mouseout, qui fonctionne très bien, mais Cliquez, je dois la div à ouvrir et img2 se congeler et à nouveau cliquez div div disparaît et onmouseover et onmouseout fonctionne. Actuellement, le problème est que, lors d'un clic, la div apparaît mais les fonctions onmouse over et onmouseout sont également déclenchées.

Khushi

Answer 1

Vous devez arrêter les événements de bouillonnement. À la fin de votre code onclick, ajoutez ceci: window.events.cancelBubble = true; et voyez comment cela fonctionne pour vous. Je ne suis pas sûr que cela va arrêter les événements mouseover et mouseout, mais donnez-lui un tourbillon.

Answer 2

Hey j'ai réussi cet événement avec l'aide de la logique ... Mes conditions sont quitter différentes ..

événement onmouseover = fonction d'écriture pour afficher Première image

onmouseout event = fonction d'écriture pour afficher l'image que vous souhaitez afficher après clic

événement onclick = Enregistrer au dernier clic l'image (quelque part dans le champ caché) aussi fonction d'appel « fonction d'écriture pour afficher l'image que vous souhaitez afficher après click.ie. fonction SND », & dire retour faux;

C'est tout Ne pas obtenir url img sur l'événement mouseout comme paramètre au lieu écrire Js amusant pour elle d'obtenir url img dans « Enregistrer dernier clic l'image (par exemple. Tout d'abord le plaisir utilisé sur l'événement onclick »)

I pense que cela va vous aider