onmouseover、onmouseout、onclick 事件上的图像更改

Question

我有两个图像，img1 和 img2。 我的代码：

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);
	    if ( div.style.display != "none" ) 
	    {
		    div.style.display = "none";
		    document[img_name].src='downarrow.png';
    		
	    }
	    else 
	    {
		    div.style.display = "block";
		    document[img_name].src='uparrow.png';
	    }
    }
    function showdata(id,img_name,state,img_id)
    {alert(state);
        if(state == true)
        {
            var imgpath='image_file/'+ img_name;
            var div = document.getElementById(id);
	        if ( div.style.display != "none" ) 
	        { alert('none' +state);
	            document.getElementsByName(img_name).src =imgpath + '.png';
		        div.style.display = "none";
	        }
	        else 
	        {   alert('block :' +state);
	            document.images[img_name].src='image_file/journey_icon_over.png';
		        div.style.display = "block";
	        }
	    }
    }
}

    <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>

要求是，我需要在鼠标悬停时使用 img1 ，在鼠标移出时使用 img2 ，这工作正常，但是在单击时，我需要打开 div 并冻结 img2 ，然后再次单击 div 消失，并且 onmouseover 和 onmouseout 状态正常工作。 目前的问题是，单击时会出现 div，但 onmouse over 和 onmouseout 函数也会被触发。

库什

Answer 1

你需要阻止事件的发酵。 在 onclick 代码末尾添加以下内容：
window.events.cancelBubble = true; 看看它对您有何作用。 我不确定这是否会停止 mouseover 和 mouseout 事件，但请尝试一下。

Answer 2

嘿，我在逻辑的帮助下成功完成了该事件......
我的条件完全不同..

onmouseover 事件 = 编写函数来显示第一个图像

onmouseout 事件 = 编写函数来显示单击后要显示的图像

onclick 事件 = 还保存最后单击的图像（在隐藏字段中的某处）
调用函数“编写函数来显示要显示的图像
点击后。 snd 函数”，& 说返回 false；

仅此而已
不要在 mouseout 事件上获取 img url 作为参数，而是编写 Js fun 让它在“保存上次单击的图像（即 onclick 事件上使用的第一个 fun”）中获取 img url

我认为这会有所帮助你