изменение изображения на 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); 
 
\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>

требование заключается в том, что мне нужно Img1 на наведении курсора мыши и Img2 на отведении указателя мыши, который работает отлично, но на Щелк, мне нужно DIV, который будет открыт и Img2 замерзнуть и снова нажать div, и рабочие состояния onmouseover и onmouseout работают. В настоящее время проблема заключается в том, что при щелчке появляется div, но также запускаются функции onmouse over и onmouseout.

Khushi

Answer 1

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

Answer 2

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

OnMouseOver событие = функция записи, чтобы отобразить первое изображение

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

OnClick события = Сохранить последние щелкнул изображение (где-то в скрытом поле) также вызова функция «функция записи для отображения изображения, которые вы хотите отобразить после функции SND click.ie.», & say return false;

Это все Не получить Img URL на mouseout события в качестве параметра вместо писать Js удовольствие для того, чтобы получить IMG URL в «Сохранить последний щелкнул изображение (то есть. Первый весело используется на OnClick событие»)

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