Question

I would like to have an image which changes into three images when the mouse is moved to the left and right of it.

• Left to show the left arrow when the cursor is on the left side
• Center to show the up arrow when the cursor is in the center
• Right to show the right arrow when the cursor is on the right side

I found a jQuery script that works well. I edited it a bit and got it to display the left and right arrows when the mouse was moved. I just have the center part left to do and am not sure how to add that.

Here is what I have. (See also jsFiddle page: http://jsfiddle.net/WhkJB/ )

var image_src = {
    left: "http://i.imgur.com/ubKrq.jpg",
    right: "http://i.imgur.com/SxHCS.jpg",
};

$(document).mousemove(function(event){
    var mloc = {
        x: event.pageX,
        y: event.pageY
    };

    if( 
        (mloc.x >= 0 && mloc.x <= $(document).width()/2 )
    ){
        $(".arrow").attr("src", image_src.left);
    }else if( 
        (mloc.x >= $(document).width()/2 && mloc.x <= $(document).width()) &&
        (mloc.y >= 0 && mloc.y <= $(document).height()/2)
    ){
        $(".arrow").attr("src", image_src.right);
    }

});​

Another question – When you move the mouse below the image it doesn’t work. Is there anyway to make it so it does it so it moves on the whole page?

Any help would be greatly appreciated.

Answer 1

You can first calculate the X position percentage and then apply a simple if against it.

i.e.:

var image_src = {
    left: "http://i.imgur.com/ubKrq.jpg",
    right: "http://i.imgur.com/SxHCS.jpg",
    up: "http://i.imgur.com/SxHCS.jpg" // replace with UP image
};

$(document).mousemove(function(event){
    var xPercent = (event.pageX / $(document).width()) * 100;
    if(xPercent <= 40) { // show left
        $(".arrow").attr("src", image_src.left);
    }
    else if(xPercent >= 60) { // show right
        $(".arrow").attr("src", image_src.right);
    }
    else { // show up
        $(".arrow").attr("src", image_src.up);
    }
});​​​