Question

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;
}

Answer 1

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('');
});