Разделение div на части

[antserg]

Здравствуйте.

Допустим есть элемент:

<div id="div-image"></div>

Внутри есть какое-то содержимое.

Такой вопрос. Можно ли разделить этот блок на визуальные части, чтобы затем на них повесить события?

Например:

$("#div-image").hover(function(){
  // здесь что-то делаем
});

Здесь при наведении курсора мыши на блок что-то делаем. А мне нужно, чтобы при наведении курсора мыши на первые 30% по ширине блока что-то делаем, и при наведении мыши на следующие 70% делаем уже другое.
То есть как-так нужно:

$("#div-image"*30%_по_ширине).hover(function(){
  // здесь что-то делаем
});

$("#div-image"*70%_по_ширине).hover(function(){
  // здесь делаем другое
});

В качестве примера: FACEBOOK. Там при просмотре картинки если кликнуть по первой трети картинки - то переход на предыдущую картинку, если кликнуть по центру или правой части картинки - то переход к следующей картинке.

Подскажите пожалуйста как можно реализовать подобное с помощью jQuery?

[zlodeeev]

Если дело именно с изображением то, как подсказал Serg_pnz - лучше использовать теги <map><area>(кликабельно)

Если же с дивами, то навешивать сверху невидимые дивы:

<div class="image_view">
    <div class="clear" id="left"></div>
    <div class="pic"></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;
}

И подцепляй события на клики по #right и #left

[Deff]

Ксать а почему при любых событиях на данном div - не тестить координаты мыши ?

Воть тут есть тест координат по событию = Обработка событий мыши при выделении области картинки

[antserg]

zlodeeev,
Deff,
Огромное спасибо за помощь. Задача решена. Я выбрал вариант с координатами мыши. На мой взгляд это наиболее оптимальное решение данной проблемы.