image change on onmouseover, onmouseout, onclick events

Question

I have a two images say, img1 and img2. My 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);
     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>

the requirement is that, i need img1 on mouseover and img2 on mouseout, which is working fine, but on Click, i need the div to be opened and img2 get frozen and in again click div disappears and onmouseover and onmouseout states working. Currently the problem is, on click, the div appears but the onmouse over and onmouseout functions are also fired.

Khushi

Answer 1

Hey I have managed that event with help of logic... My conditions are quit different..

onmouseover event = write function to display First Image

onmouseout event = write function to display Image that you want to display after click

onclick event = Save last clicked image (somewhere in hidden field) also call function "write function to display Image that you want to display after click.ie. snd function", & say return false;

Thats all Do not get img url on mouseout event as a parameter instead write Js fun for it to get img url in "Save last clicked image (ie. first fun used on onclick event")

I think this will help you

Answer 2

You need to stop the events from bubbling up. At the end of your onclick code, add this: window.events.cancelBubble = true; and see how that works for you. I'm not sure this will stop the mouseover and mouseout events, but give it a whirl.