Serg_pnz,
аааа, готовое. не я потом опубликую ссылку на рабочий сайт лучше. не хочу недоделку кривую показывать. -)

Ребят, через stop().animate() думаю можно будет сообразить. А для места наведения мышки сделать невидимые дивы и на них уже hover повесить.
В общем логика такая будет:

HTML:

<div class="image_view">
    <div class="clear" id="left"></div>
    <div class="pic"><img src=""></div>
    <div class="clear" id="right"></div>
</div>

.image_view {
    overflow:hidden;
    position: relative;
    display:block;
}

.clear {
    position:absolute;
    opacity:0;
    width:10%;
    height:100%;
    z-index:1000;
}
.clear#left{left:0} .clear#right{right:0}
.pic {
    position:absolute;
    width:100%;
    height:100%;
    overflow:hidden;
    display:block;
}

.pic img{
    //лучше отцентровать в js, но если все картинки будут статичны - то css тоже сойдет
}

$(window).ready(function(){
    $('#left').hover(function(){
        $('.pic').children('img').stop().animate({}, 700); //анимацию уже сам через необходимые свойства допишешь, скорее всего связано с центрованием картинки будет связано еще пару функций...
    },

    function(){
        $('.pic').children('img').stop().animate({}, 700); 
    })

    $('#right').hover(function(){
        $('.pic').children('img').stop().animate({}, 700);
    },

    function(){
        $('.pic').children('img').stop().animate({}, 700); 
    })
})

Когда писал это НЕ БЫЛО ДВУХ СТРАНИЦ СООБЩЕНИЙ lol

map area не повыгоднее будет?

Согласен, как всегда подумал о том, что делаю только когда начиют появляться другие варианты.