Форум программистов, компьютерный форум, киберфорум
jQuery
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.80/5: Рейтинг темы: голосов - 5, средняя оценка - 4.80
0 / 0 / 0
Регистрация: 23.08.2011
Сообщений: 5

Проблема со сменой изображений при наведение

25.08.2011, 14:30. Показов 1145. Ответов 4
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Здравствуйте, возникла проблема со скриптом:
Java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<script type="text/javascript" src="./jquery-1.4.2.min.js"></script>
<script type="text/javascript">
//On Doc Ready
$(function() {
   //*************** JQeury Universal Image Button ***************
   function getHoverPath (imgPath) {
      //split imgPath after each '/' and create array to path directories and file name
      var srcPathArray = imgPath.split('/');
      //find image file name get length of srcPathArray and retrieve last item which is the image file ex: "images/buttons/IMG.gif"
      var imgFile = srcPathArray[srcPathArray.length-1];
      //image file name array split at "." to get:[fileName, ext]
      var imgArray = imgFile.split('.');
      //img name (first item in imgArray)
      var imgName = imgArray[0];
      //image ext (second item in imgArray)
      var imgExt = imgArray[1];
      //image src path
      var srcPath = imgPath.split(imgFile , 1);
      // concatenate path and add "_hover" to image file name
      return srcPath + imgName+'_hover.'+ imgExt;
      };
   // get hover button array
   var hoveredButtons = new Array();
            
   $('.js_uniButton').mouseover (function() {
   $this = $(this);
      
      //get image path of this instance
      var imgPath = $this.children('img').attr('src');
      //cache img path url on initial mouseover
      if (typeof(hoveredButtons[ imgPath ]) == 'undefined') {
      hoveredButtons[ imgPath ] = getHoverPath( imgPath );
      //console.log('cache image path ' + imgPath + ' and hover path ' + hoveredButtons[ imgPath ]);
      }
      $this.children('img').attr('src' , hoveredButtons[ imgPath ]);
      
      //mouseout actions
      $this.mouseout(function() {
      //define this handler
         var $this = $(this), handler = arguments.callee;
         //unbind mouseout handler
         $this.unbind('mouseout', handler);
         // on mouseout, swap current image with original image path
         $this.children('img').attr('src' , imgPath);
      });
   });
   //Close On Doc Ready
})
</script>
HTML5
1
2
3
4
<div id="wb_Image1" style="margin:0;padding:0;position:absolute;left:9px;top:17px;width:155px;height:71px;text-align:left;z-index:1;">
<a href="#" class="js_uniButton"><img src="1.png" id="Image1" alt="" border="0" style="width:155px;height:71px;"></a></div>
<div id="wb_Image2" style="margin:0;padding:0;position:absolute;left:187px;top:17px;width:155px;height:71px;text-align:left;z-index:2;">
<a href="#"><img src="1.png" id="Image2" alt="" border="0" style="width:155px;height:71px;"></a></div>
У меня на странице, как видно из кода расположены два Image объекта, сейчас при наведение на первый Image(id=wb_Image1) происходит смена картинки на 1_hover.png
Так вот, я хотел бы как то сделать что бы при наведение, скрипт менял картинку не на первом Image(id=wb_Image1), а на втором т.е Image(id=wb_Image2)

Предполагаю, что проблему можно решить изменив 27 сточку "$this = $(this);" только на что??? в данном случае this выбирает текущий объект...
делал так:
$this = $(document.wb_Image2); но это не работает

Example: demo.zip
0
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
25.08.2011, 14:30
Ответы с готовыми решениями:

Изменение изображений при наведение мыши
Доброго времени суток, уважаемые форумчане. Вопрос ребят в следующем. есть n-ое количество картинок. Как можно сделать так, что бы....

Проблема с сменой кодировки
Новая проблемка : Русифицировал дату на сайте и сохранил документ в utf-8. Теперь дата на русском , но сам сайт криво отображается, шапка...

Проблема с сменой кодировки
Такая вот проблема : Русифицировал дату на сайте и сохранил документ в utf-8... Из-за этого сайт не правильно отображается ( см. рис 1 ),...

4
 Аватар для Halva
24 / 24 / 2
Регистрация: 02.11.2008
Сообщений: 118
25.08.2011, 15:16
Всё на столько просто, что даже предположить себе не можешь - добавляешь на второй ссылке class="js_uniButton" и счастье тебе! Если не хочешь, чтобы на первой смена происходила - удали класс у первой ссылки.
0
0 / 0 / 0
Регистрация: 23.08.2011
Сообщений: 5
25.08.2011, 15:51  [ТС]
Спасибо за ответ, только вот вы не поняли меня, я хочу что бы мышка попрежнему наводилась к первому объекту, а вот картинка изменялась на втором.
0
0 / 0 / 0
Регистрация: 22.08.2011
Сообщений: 6
26.08.2011, 03:39
в 28 строчке когда ты пишешь
Java
1
$this = $(this);
то говоришь о том, что хочешь работать с данным объектом, то есть с объектом у которого
CSS
1
class = "js_uniButton"
. можешь работать и дальше с классами, тогда тебе нужно задать класс у второй картинки, чтобы они чем-то отличались. и далее соответственно в 28 строчке пишешь
Java
1
$this =  $('.yourClass');
ну а дальше ты уже сам вроде знаешь свой код, просто работаешь уже с этой переменной. а вообще советую тебе прочитать про выборки в jQuery... лучше работай с id, с классами неудобно довольно-таки, хотя в данном случае это может и актуально. удачи
0
0 / 0 / 0
Регистрация: 23.08.2011
Сообщений: 5
26.08.2011, 12:36  [ТС]
Большое спасибо, все заработало
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
26.08.2011, 12:36
Помогаю со студенческими работами здесь

Проблема со сменой разрешения
очень странно ведёт себя вот этот код:DEVMODE dm; dm.dmPelsWidth = screenW; dm.dmPelsHeight = screenH; dm.dmFields = DM_PELSWIDTH...

Проблема при чтении изображений в opencv
Всем привет!) Пишу программу для распознавания лиц с использованием библиотеки opencv на языке c++. Решила все делать в visual studio....

Проблема со сменой процессора ( точнее проблемы)
В общем я в компах не шикбо умен, но что то да понимаю. Решил я обновить себе проц до этого стоял pentium G645 2.90Ghz. Заказал (конечно же...

Проблема с общей производительностью и сменой железа. УЖЕ ВСЕ СДЕЛАЛ, ЧТО МОГ. ГОСПОДА ХРИСТА РАДИ выручайте)
Уже год морочусь с проблемой! Докупил себе оперативы, совместимость с другой плашкой норм оказалась, но комп стал заметно медленее , что в...

Смена Image1 при наведение сохраняя изображения в программу при компиляции
Доброго времени суток ! Суть такова , использую Image в качестве кнопки , хотел реализовать визуальные эфекты при наведение и нажатие ! ...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Новые блоги и статьи
Доступность команды формы по условию
Maks 07.04.2026
Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: сделать доступной кнопку (команда формы "ЗавершитьСписание") при. . .
Уведомление о неверно выбранном значении справочника
Maks 06.04.2026
Алгоритм из решения ниже реализован на примере нетипового документа "НарядПутевка", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если в документе выбран неверный склад. . .
Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt
8Observer8 05.04.2026
Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .
AkelPad-скрипты, структуры, и немного лирики..
testuser2 05.04.2026
Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .
Отображение реквизитов в документе по условию и контроль их заполнения
Maks 04.04.2026
Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .
Фото всей Земли с борта корабля Orion миссии Artemis II
kumehtar 04.04.2026
Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .
Вывод диалогового окна перед закрытием, если документ не проведён
Maks 04.04.2026
Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .
Программный контроль заполнения реквизитов табличной части документа
Maks 02.04.2026
Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: 1. Реализовать контроль заполнения реквизита. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru