Форум программистов, компьютерный форум, киберфорум
Наши страницы
jQuery
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.75/4: Рейтинг темы: голосов - 4, средняя оценка - 4.75
lestat89
digital-solution.ru
22 / 33 / 10
Регистрация: 12.09.2012
Сообщений: 285
1

Частичная замена адреса картинки при наведении (замена src при hover)

25.07.2015, 17:13. Просмотров 659. Ответов 2
Метки нет (Все метки)

Доброго! Задача следующая - при наведении на картину нужно изменить в адресе картинки с image.png на image_hover.png причем расширения могу быть любыми. Реально ли это? Мне на ум приходит только реализация с Id в котором будет название без расширения, при этом адрес картинок явно определен. Это не то что нужно, может у кого еще есть идеи? Иначе слишком много привязок, а я хочу привязку только к классу, что бы скрипт работал для любого изображеня, в любом месте. Извиняюсь за оформление, пишу с телефона.

Добавлено через 37 минут
Пока решил проблему так (почти то что нужно: меняет все картинки внутри элемента с классом ".onhover_change"
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
$(document).ready(function(){
 
    $(".onhover_change").hover(function()
        {
            var src = $(this).find("img").attr("src").match(/[^\.]+/) + "_hover.png";
      $(this).find("img").attr("src", src);
        },function()
        {
            var src = $(this).find("img").attr("src").replace("_hover.png", ".png");
      $(this).find("img").attr("src", src);
        });
 
});
Единственное с регулярками в JS никак не разберусь, поэтому пока не догадываюсь как доработать этот код, а точнее отвязать его от расширения картинок (сейчас жестко .png)
0
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
25.07.2015, 17:13
Ответы с готовыми решениями:

Плавное замена блоков при Hover
Приветствую! Помогите доработать jquery. при Hover на блок, Первый блок должен...

Замена цвета А на цвет В при наведении
Добрый день! Столкнулся с задачей: есть меню, в котором используется иконка...

Замена картинки при наведении
Добрый день. На JS никогда ничего не писал да и вообще новичок в...

Замена src картинки
Доброго времени суток уважаемые гуру))) Прошу помочь с такой задачей ...

Замена картинки при наведение мыши
Не могу разобрать что далее для события писать, чтобы при наведение на картинку...

2
Armi
309 / 103 / 69
Регистрация: 18.04.2015
Сообщений: 342
25.07.2015, 23:34 2
HTML5
1
<img src="fdsdsf/fdsfds/dfsd/ne4to.jpg" alt="Моя картнка">
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$(document).ready(function(){
    
    
 function rename(src){
        arrPath= src.split("/");
        var last=arrPath.length-1;
        arrName = arrPath[last].split(".");
        arrName[0]=(arrName[0].search("_hover") != -1)?arrName[0].replace("_hover", ""):arrName[0]+="_hover";
        arrPath[last]=arrName.join(".");
 
        return arrPath.join("/");
        }
    $("img").hover(function(){
      var rr = rename($(this).attr("src"));
        $(this).attr("src", rr);
        
    });
});
http://jsfiddle.net/emv8rLh7/6/
1
lestat89
digital-solution.ru
22 / 33 / 10
Регистрация: 12.09.2012
Сообщений: 285
26.07.2015, 01:34  [ТС] 3
Armi, Супер!
У меня задача стоит на работу этой функции внутри класса, но это уже мелочи я допилил. Оставлю итоговый код:
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
function rename(src){
        arrPath= src.split("/");
        var last=arrPath.length-1;
        arrName = arrPath[last].split(".");
        arrName[0]=(arrName[0].search("_hover") != -1)?arrName[0].replace("_hover", ""):arrName[0]+="_hover";
        arrPath[last]=arrName.join(".");
 
        return arrPath.join("/");
        }
    $(".onhover_change").find("img").hover(function(){
      var rr = rename($(this).attr("src"));
        $(this).attr("src", rr);
        
    });
Благодарю за помощь!
0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
26.07.2015, 01:34

Hover при наведении
почему-то не срабатывает может кто знает где ошибка зарыта?) var img =...

Hover при наведении
Доброго вечера, помогите поправить скрипт который при наведении менял бы...

Как имитировать событие hover элемента А при наведении на элемент Б?
&lt;div class=&quot;plans-list&quot;&gt; &lt;div class=&quot;list-block&quot;&gt; &lt;div...


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

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru