0

img1とimg2という2つの画像があります。私のコード：

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 関数も起動されることです。

クシ

4

2 に答える 2

0

ねえ、私は論理の助けを借りてそのイベントを管理しました...私の条件はまったく異なります..

onmouseover イベント = 最初の画像を表示する書き込み関数

onmouseout event = クリック後に表示したい画像を表示する関数を書く

onclick イベント = 最後にクリックした画像を保存 (非表示フィールドのどこかに) 関数「クリック後に表示する画像を表示する関数を書き込みます。つまり、snd 関数」を呼び出して、return false; と言います。

それだけです パラメータとしてイベントでimg url を取得しないmouseoutでください代わりに、「最後にクリックされた画像を保存する (つまり、onclick イベントで使用される最初の fun)」で img url を取得するための Js fun を記述します。

私はこれがあなたを助けると思います

于 2012-04-11T07:18:38.827 に答える
0

イベントがバブルアップするのを止める必要があります。onclickコード の最後に、これを追加window.events.cancelBubble = true;してください。mouseoverこれでandmouseoutイベントが停止するかどうかはわかりませんが、試してみてください。

于 2009-11-16T21:44:29.843 に答える