Question

I have an image that is presented after you hover over with your mouse. When I click on the image I would like the image to stay intact by using the removAttr method. But using removeAttr does not seem to work for me ….thanks for any suggestions.

Here is my HTML MARKUP

<table class="ovalControl">
    <tr>
        <td class="oval">
        </td>
        <td class="ovalSibling" align="center" >
            <div id="divOvalSibling" style="height:15px; width:30px;">
                <img id="imgOvalSibling" 
                     height="15px" 
                     width="30px" 
                     src="../Images/sib.PNG"
                     alt=""
                     onclick="respond0(); return false;"
                     style="display:none"/>
            </div>
        </td>
    </tr>
    <tr>
        <td class="ovalChildWidth" align="center">
          <div id="divOvalChild" style="height:25px; width:20px;">
             <img id="imgOvalChild"
                 height="25px"
                 width="20px"
                 src="../Images/Child.PNG"  
                 alt=""
                 onclick="respond1(); return false;"
                 style="display:none"/>
           </div>
        </td>
        <td class="blank">
            &nbsp;</td>
    </tr>
</table>

Here is my JQUERY code:

<script language="javascript" type="text/javascript">

        var prmRegister = Sys.WebForms.PageRequestManager.getInstance();
            prmRegister.add_initializeRequest(initializeRequest);
            prmRegister.add_endRequest(endRequest);

        $(document).ready(function () {
            $('#divOvalSibling').hover(
            function () {$('#imgOvalSibling').show();}, 
            function () {$('#imgOvalSibling').hide();})
        })

        $(document).ready(function () {
            $('#divOvalChild').hover(
            function () { $('#imgOvalChild').show();},
            function () { $('#imgOvalChild').hide();})
        })

        function initializeRequest(sender, args) {
        }

        function endRequest(sender, args) {               
        }

        function respond0() {

            var startX = $("#imgOvalSibling").offset().left + 15;
            var startY = $("#imgOvalSibling").offset().top + 7;

            $("#respond0").drawLine(startX, startY, 850, 250);
            $("#imgOvalSibling").removeAttr("style");
        }

        function respond1() {

            var startX = $("#imgOvalChild").offset().left + 10;
            var startY = $("#imgOvalChild").offset().top + 12;

            $("#respond1").drawLine(startX, startY, 400, 500);
            $("#imgOvalChild").removeAttr("style");

        }

    </script>

Thanks,
Michael

Answer 1

You can unbind the hover on a click event. Doing so will prevent the mouseleave event and the image will stay in view.

$('#imgOvalSibling').click(function() {
    $('#divOvalSibling').unbind('mouseenter mouseleave');
});

Demo: http://jsfiddle.net/wdm954/YG6pq/1/