Создание ролловеров кнопок с помощью jQuery

Я пытаюсь создать функцию, которую я могу использовать глобально для создания состояний прокрутки для изображений. По сути, я хочу иметь возможность добавить класс к изображению, а затем, когда вы его перевернете, jquery будет использовать то же имя изображения и то же расширение, но добавить «-over» к имени файла. (У меня будет изображение с состоянием опрокидывания, названным так же, как и состояние без опрокидывания, за исключением того, что на нем есть -over. Я придумал это, но это не работает. Я делаю что-то неправильно или кто-нибудь знает о лучший способ сделать это?

$('.btn').hover(function(){
    $(this).attr("src").split(".jpg").join("Over.jpg"));
});

изображение:

<img src="/static/images/overlay-close-button.jpg" alt="Close" title="Close" id="our-staff-overlay-close" class="btn"/>

Спасибо!

РЕДАКТИРОВАТЬ: Есть ли способ сделать его неспецифичным для времени файла, где он может определить любой тип файла, а не только jpg?

Я использую:

$('.btn').hover(function(){
    this.src = this.src.split(".jpg").join("Over.jpg");
}, function() {
    this.src = this.src.split("Over.jpg").join(".jpg");
 });

и он отлично работает

РЕДАКТИРОВАТЬ 2: Могу ли я также добавить активное состояние (при нажатии кнопки)?


javascript jquery rollover
person Bill    schedule 03.01.2011    source источник
comment
Чтобы сделать то же самое для кликов, вы можете взять код из моего ответа ниже и подключить его к .mousedown (для добавления -over) и .mouseup (для удаления -over)   -  person Alex Vidal    schedule 03.01.2011

Ответы (3)


arrow_upward
3
arrow_downward

Разделение и объединение должны работать по назначению, вам просто нужно установить это обратно в атрибут src файла img:

$('.btn').hover(function() {
    var src = $(this).attr("src");
    src = src.split('.jpg').join('-over.jpg');
    $(this).attr("src", src);
});

Кроме того, если вы хотите, чтобы он работал с любым расширением, вы можете использовать регулярное выражение, подобное этому:

$('.btn').hover(function() {
    var src = $(this).attr("src");
    src = src.replace(/(.*)\.(png|gif|jpg|jpeg)$/, "$1-over.$2");
    $(this).attr("src", src);
});

Регулярное выражение соответствует всему, что заканчивается точкой, за которой следует один из png, gif, jpg, or jpeg, и заменяет его первой частью (путь + имя файла), строкой "-over", точкой и исходным расширением.

Вы можете вернуть его в исходное состояние, удалив -over из исходного кода:

$('.btn').hover(function() {
    var src = $(this).attr("src");
    src = src.replace(/(.*)\.(png|gif|jpg|jpeg)$/, "$1-over.$2");
    $(this).attr("src", src);
}, function() {
    var src = $(this).attr("src");
    src = src.replace(/(.*)-over\.(png|gif|jpg|jpeg)$/, "$1.$2");
    $(this).attr("src", src);
});

Событие jQuery().hover принимает две функции, первая вызывается при запуске ховера, вторая вызывается при выходе из ховера.

person Alex Vidal    schedule 03.01.2011
comment
Ваш ответ действительно умный! - person Sébastien Gicquel; 11.01.2013

arrow_upward
1
arrow_downward

Вы просто ничего не делаете с результатом. В этом случае вы хотите установить src (что можно сделать несколькими способами), вот наиболее эффективный пример (без изменения вашего метода .split().join()):

$('.btn').hover(function(){
  this.src = this.src.split(".jpg").join("Over.jpg");
}, function() {
  this.src = this.src.split("Over.jpg").join(".jpg");
});
person Nick Craver    schedule 03.01.2011
comment
Попробовал, и ничего не меняется, когда я переворачиваю изображение - person Bill; 03.01.2011
comment
@Phil - это внутри обработчика document.ready. поэтому селектор $('.btn') запускается после того, как элементы присутствуют в DOM? - person Nick Craver; 03.01.2011
comment
Я думаю, это потому, что у меня был этот код над вызовом файла jquery, и он говорил, что $.... не определен - person Bill; 03.01.2011
comment
Ага... в этом была проблема. Работает сейчас - person Bill; 03.01.2011

arrow_upward
0
arrow_downward

Возможно, вы захотите рассмотреть возможность достижения эффекта опрокидывания с помощью чистого CSS. На самом деле нет необходимости задействовать скрипт в такой тривиальной вещи, как прокрутка изображения. Кроме того, чистый подход CSS по-прежнему будет работать для параноиков, которые просматривают страницы с отключенным скриптом.

Используйте псевдоклассы :hover и :active и воспользуйтесь преимуществами спрайтов CSS.

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

person josh3736    schedule 03.01.2011