image change on onmouseover, onmouseout, onclick events

Question

Hi All,

I have a two iamges say, img1 and img2. My Code :

    <div id="JourneyReport" style="display:none;" class="divbackground">
    <uc1:ReportControl ID="JourneyControl" runat="server" />
</div>
</td>

and my javascript is: 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";
        }
    }
}

}

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

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.