Losing MouseUp event if releasing not over the same element

Question

I have got a problem with a slider. When i grab the handler, i change the .src of the image, just to change its color. However, i want it to change back to the original color when i release the mouse button. I have tried two things.

1) Changing it back on the handler mouseup event: this works only if i release the button over the handler, so this is not a solution.

2)Changin it back on the window mouseup event: the event is not firing properly. If i click and release on any place of the window, the event fires normaly, but if i click in the handler, move the cursor to any other point of the window, and then release the button, the event will not fire.

Btw, im using the prototype js framework.

Solutions? Thanks

Here is the code. I load the handler function when the document is ready.

function handler()
{

    var handler = $('handler');

    Event.observe(window, "mouseup", function(){
        alert('salta');   //to see when mouseup fires
        if(handler.src=='http://localhost/moodle/blocks/videoavatar/eggface/trunk/gripper_o.png'){    //orange
            handler.src='http://localhost/moodle/blocks/videoavatar/eggface/trunk/gripper.png';}    //grey
    });


    Event.observe(handler,'mousedown',function(){handler.src='http://localhost/moodle/blocks/videoavatar/eggface/trunk/gripper_o.png';});    //orange

}

Answer 1

How about onmouseout event?

Answer 2

You should be attaching the mouseup handler to the document object.

Answer 3

Here is the code. I load the handler function when the document is ready.

function handler()
{

    var handler = $('handler');

    Event.observe(window, "mouseup", function(){
        alert('salta');   //to see when mouseup fires
        if(handler.src=='http://localhost/moodle/blocks/videoavatar/eggface/trunk/gripper_o.png'){    //orange
            handler.src='http://localhost/moodle/blocks/videoavatar/eggface/trunk/gripper.png';}    //grey
    });


    Event.observe(handler,'mousedown',function(){handler.src='http://localhost/moodle/blocks/videoavatar/eggface/trunk/gripper_o.png';});    //orange

}