изменение изображения на событиях 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.

Khushi

Answer 1

Эй, я справился с этим событием с помощью логики ... Мои условия совсем другие ..

Событие onmouseover = функция записи для отображения первого изображения

Событие onmouseout = функция записи для отображения изображения, которое вы хотите отобразить после нажатия

событие onclick = Сохранить последнее нажатое изображение (где-то в скрытом поле) вызов функции "написать функцию для отображения изображения, которое вы хотите отобразить после клика. snd function ", & say return false;

Вот и все Не получайте img url для события mouseout в качестве параметра, вместо этого напишите Js fun, чтобы получить img url в «Сохранить последнее нажатое изображение (т. Е. Первое удовольствие, используемое в событии onclick»)

Я думаю, что это поможет вам

Answer 2

Вам нужно остановить всплывание событий. В конце вашего onclick кода добавьте это: window.events.cancelBubble = true; и посмотрите, как это работает для вас. Я не уверен, что это остановит события mouseover и mouseout, но приведу в движение.