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

}

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

}

• javascript
• css
• events
• prototypejs
• onmouseup

• 1 Code would be good. Difficult to debug otherwise. – Alexander Sagen Commented Sep 30, 2010 at 14:38
• you're attaching a mouseup handler to window, not document. they are not the same. – lincolnk Commented Sep 30, 2010 at 17:37

3 Answers 3

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

How about onmouseout event?

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

}