Создание опрокидывания кнопок с jQuery

Question

Я пытаюсь создать функцию, которую я могу использовать глобально для создания состояний опрокидывания изображений. В принципе, я хочу иметь возможность добавлять класс к изображению, а затем, когда вы его опрокинете, 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"/> 

Благодаря

EDIT: есть ли способ сделать это неспецифическое ко времени файла, где он может выяснить любой тип файла, а не только jpgs?

Я использую:

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

и он работает большой

EDIT 2: Можно также добавить в активное состояние (когда кнопка нажата время)?

Answer 1

Расщепление и присоединение должно работать, как задумано, вам просто нужно установить, что вернуться к атрибуту ГКЗ 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, и заменяет его с первой частью (путь + имя файла), строка «-более», период и исходное расширение.

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

$('.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 событие принимает две функции, первая вызывается при запуске парить, второй вызывается при выходе из режима наведения.

Answer 2

Вы ничего не делаете с результатом. В этом случае, если вы хотите установить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"); 
}); 

Answer 3

$('.btn').hover(function(){ 
    $(this).attr("src", this.src.split(".jpg")[0] + "-over.jpg"); 
}, function() { 
    $(this).attr("src", this.src.split("-over.jpg")[0] + ".jpg"); 
}) 

Answer 4

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

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

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