How to make a jquery arrow show/hidden like picasa?

How to make a jquery arrow show/hidden like picasa?

mouse over left part of the image's div, show the left arrow, mouse over right part of the image's div, show the right arrow?

some example like https://picasaweb.google.com/104706700962389688105/TheWave2011CoyoteButtesNorthVermilionCliffs?feat=featured#5621945010772287442

开发者_运维百科Thanks.

some get mouse position's code:

function checkS(e){
// capture the mouse position
    var posx = 0;
    var posy = 0;
    if (!e) var e = window.event;
    if (e.pageX || e.pageY)
    {
        posx = e.pageX;
        posy = e.pageY;
    }
    else if (e.clientX || e.clientY)
    {
        posx = e.clientX;
        posy = e.clientY;
    }

    document.getElementById('pos').innerHTML = 'Mouse position is: X='+posx+' Y='+posy;

    document.getElementById('pos').style.left = posx;
    document.getElementById('pos').style.top = posy;
}

This is a beginning, you'd need to design arrows though: http://jsfiddle.net/7cBwU/.

$('#thediv').mousemove(function(e) {
    if(e.offsetX < 150) {
        $('#thediv').html('show first arrow');
    } else {
        $('#thediv').html('show second arrow');
    }
}).mouseout(function() {
    $('#thediv').html('');
});

just get the position of the mouse relative to your image.

look here for code:

http://www.switchonthecode.com/tutorials/jquery-snippet-relative-mouse-position