Question

Is there a way to make this script switch images based on the direction the pointer is?

For example, if you have a fish, and you move the mouse to the right of the fish, it switches to an image facing that way. When you move your pointer to the left of the fish, it points it the other way.

demo

JAVASCRIPT

$("#foo").mousemove(function(event) {
    $("#bee1").stop().animate({left: event.pageX, top: event.pageY}, 300)
});

HTML

<div id="foo">
<div id="bee1">MoveMe</div>
</div>

CSS

#foo{
  height:500px;
  width:400px;
}
#bee1{
  position:absolute;
  border:1px solid #ccc;
}

Answer 1

$("#foo").mousemove(function(event) {
        var bee = $("#bee1");
        var position = bee.position();
        var mousey = event.pageX;


    if(position.left > mousey) {
        $("#bee1").html("left");
    } else {
        $("#bee1").html("right");
    }

        $("#bee1").stop().animate({left: event.pageX, top: event.pageY}, 300);
});