Форум программистов, компьютерный форум, киберфорум
jQuery
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.50/6: Рейтинг темы: голосов - 6, средняя оценка - 4.50
29 / 41 / 10
Регистрация: 12.09.2012
Сообщений: 329
1

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

25.07.2015, 17:13. Показов 1107. Ответов 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

Помощь в написании контрольных, курсовых и дипломных работ здесь.

Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
25.07.2015, 17:13
Ответы с готовыми решениями:

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

Замена одной картинки Image на другую при наведении и обратно
Замена одной картинки Image на другую при наведении и обратно. На форме два Image и на один из...

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

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

2
311 / 105 / 69
Регистрация: 18.04.2015
Сообщений: 345
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
29 / 41 / 10
Регистрация: 12.09.2012
Сообщений: 329
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
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
26.07.2015, 01:34

Помощь в написании контрольных, курсовых и дипломных работ здесь.

замена текста при наведении
Добрый вечер! подскажите пожалуйста, можно ли без ява скрипта сделать так, чтоб при наведении на...

Замена текст при наведении
Сделать с помощью JS, чтобы при наведении на кнопку ссылки в ней менялся содержание. Например Было...

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

Кнопка, замена Image при наведении
Скажем 3 картинки :клавиша в статичном состоянии(Image1),на клавишу навели курсор(Image 2),на...

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

Замена фона ячейки при наведении
Такая проблема у меня есть меню 4 ячейки при наведении на одну из них курсора она из синего цвета...


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

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

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