Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.07.2012, 07:26
Аватар для antserg
Аспирант
Отправить личное сообщение для antserg Посмотреть профиль Найти все сообщения от antserg
 
Регистрация: 14.05.2011
Сообщений: 61

Разделение div на части
Здравствуйте.

Допустим есть элемент:
<div id="div-image"></div>

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

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

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

Здесь при наведении курсора мыши на блок что-то делаем. А мне нужно, чтобы при наведении курсора мыши на первые 30% по ширине блока что-то делаем, и при наведении мыши на следующие 70% делаем уже другое.
То есть как-так нужно:
$("#div-image"*30%_по_ширине).hover(function(){
  // здесь что-то делаем
});

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


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

Подскажите пожалуйста как можно реализовать подобное с помощью jQuery?
Ответить с цитированием
  #2 (permalink)  
Старый 13.07.2012, 09:18
Аватар для zlodeeev
Кандидат Javascript-наук
Отправить личное сообщение для zlodeeev Посмотреть профиль Найти все сообщения от zlodeeev
 
Регистрация: 11.07.2012
Сообщений: 113

Если дело именно с изображением то, как подсказал 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
Ответить с цитированием
  #3 (permalink)  
Старый 13.07.2012, 14:08
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

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

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

Последний раз редактировалось Deff, 13.07.2012 в 14:13.
Ответить с цитированием
  #4 (permalink)  
Старый 13.07.2012, 18:26
Аватар для antserg
Аспирант
Отправить личное сообщение для antserg Посмотреть профиль Найти все сообщения от antserg
 
Регистрация: 14.05.2011
Сообщений: 61

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
проблема с div И animate g00000dman jQuery 2 24.03.2011 23:34
Закрытие прозрачного div при щелчке мыши в любой его области mav1 Элементы интерфейса 8 09.02.2011 19:25
Проблема с load в div и импортом стороннего кода с помощью javascript 1quick1 Events/DOM/Window 9 04.02.2011 13:16
animate, всплывающий div box сделать по центру zero_mod jQuery 1 27.10.2010 00:23
Появление блоков div в зависимости от radio Oracool Events/DOM/Window 1 04.12.2009 18:39