Bild ändern auf onmouseover, onmouseout, onclick Ereignisse

Question

Ich habe zwei Bilder sagen, img1 und img2. Mein 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>

die Voraussetzung ist, dass, ich brauche img1 auf Mouseover- und img2 auf mouseout, was in Ordnung funktioniert, aber auf Klicken Sie, ich brauche das div geöffnet und img2 werden eingefroren werden und wieder klicken div verschwindet und onmouseover und onmouseout arbeitet. Momentan ist das Problem, dass beim Klicken das div angezeigt wird, aber die onmouse over- und onmouseout-Funktionen werden ebenfalls ausgelöst.

Khushi

Answer 1

Sie müssen aus sprudeln die Ereignisse zu stoppen. Fügen Sie am Ende Ihres onclick Codes Folgendes hinzu: window.events.cancelBubble = true; und sehen Sie, wie das für Sie funktioniert. Ich bin mir nicht sicher, dass dies die mouseover und mouseout Ereignisse stoppen wird, aber geben Sie es einen Wirbel.

Answer 2

Hey Ich habe dieses Ereignis mit Hilfe von Logik verwaltet ... Meine Bedingungen sind anders verlassen ..

Onmouseover event = Schreibfunktion Erstes Bild

Onmouseout event = Schreibfunktion zur Anzeige Bild anzuzeigen dass Sie nach dem Klick

Ereignis Onclick = Speicher letztes Bild geklickt (irgendwo in verstecktem Feld) auch Anruffunktion „Schreibfunktion zur Anzeige Bild, das Sie nach click.ie snd-Funktion. angezeigt werden sollen“, anzuzeigen & say return false;

Das ist alles nicht img URL auf mouseout Veranstaltung erhalten Sie als Parameter statt Js Spaß schreibt es in img URL zu bekommen „Speicher letztes Bild geklickt (dh. Erster Spaß auf Onclick-Ereignisse verwendet“)

I denke, das wird dir helfen