JQuery Image Swap для наведения и опускания мыши

Чего я хочу достичь:

Я хочу, чтобы замена изображения происходила сначала, когда курсор находится над изображением (наведение мыши), а затем при нажатии на изображение (щелчок мыши вниз).

Пример:

У меня есть изображение зеленой стрелки. При наведении курсора он заменяется изображением желтой стрелки, а при нажатии меняет изображение коричневой стрелки (но только до тех пор, пока удерживается щелчок). Зеленая стрелка по умолчанию всегда восстанавливается.

<img src="green-default.png" />
<img src="yellow-over.png" />
<img src="brown-mousedownclick.png" />

Что я пробовал:

Я применил обмен изображениями jQuery, который работает при наведении мыши на событие:

https://github.com/tszming/jquery-swapimage

Пример

<script type="text/javascript"> 
jQuery.swapImage(".swapImage"); 
</script>

<img src="green-default.png" class="swapImage {src: 'yellow-over.png'}" />

Любой совет будет оценен.

Принятое решение

Решение Сенада (ниже) повлекло за собой использование CSS вместо jQuery. Элементу ссылки присваивается класс, который стилизует его, чтобы он был блоком размеров заменяемых изображений. Три изображения применяются в качестве фоновых изображений для состояния по умолчанию, наведения и активного состояния элемента ссылки. Решение Сенада и демонстрационный код размещены ниже.


image jquery mouseover swap mousedown
person Dominor Novus    schedule 08.09.2011    source источник
comment
Вы можете делать все это с помощью css, jQuery не нужен.   -  person Senad Meškin    schedule 08.09.2011
comment
+1 за хорошо структурированный вопрос. @Senad: наведение курсора легко (:hover), но как бы вы сделали наведение мыши?   -  person Wulf    schedule 08.09.2011
comment
@Senad: я не осознавал, что активным состоянием ссылки было состояние щелчка/вниз.   -  person Dominor Novus    schedule 09.09.2011

Ответы (4)


arrow_upward
4
arrow_downward

Я бы пошел с CSS

CSS

a.your_link_button_class { 
   background: url('green-default.png') no-repeat;
   height: 20px;
   width: 20px;
   display: block;
}
a.your_link_button_class:HOVER {
   background: url('yellow-over.png') no-repeat;
}
a.your_link_button_class:ACTIVE {
   background: url('brown-mousedownclick.png') no-repeat;
}

HTML

<a class="your_link_button_class" href="#nothing"></a>

если вам нужен курсор-указатель, вы также можете добавить его через CSS cursor: pointer;

Это будет для всех ссылок с классом "your_link_button_class"

и в jQuery, чтобы предотвратить действие ссылки

$(document).ready(function() { $('a.your_link_button_class').click( function() { return false; }); });
person Senad Meškin    schedule 08.09.2011

arrow_upward
2
arrow_downward

Я бы сначала использовал предварительную загрузку изображений с помощью jquery, а затем привязка hover и mousedown в элементе img и изменив атрибут src на правильное изображение.

Я бы использовал hover, так как он будет обрабатывать mouseout так же, как и mouseover.

Поскольку я использую mousedown, я бы также использовал mouseup, чтобы изменить img обратно.

ОБНОВЛЕНИЕ

Вам не нужно использовать jquery для эффекта hover, вы можете сделать это с помощью css. Затем на mousedown и mouseup измените классы css для достижения желаемого эффекта.

person Ali    schedule 08.09.2011
comment
Я смог использовать CSS-решение Сенада для обоих событий. Что касается предварительной загрузки изображений через jQuery, разве недостаточно загрузить изображения в элемент div, для которого установлено значение display:none? - person Dominor Novus; 09.09.2011
comment
Вы могли бы это сделать. Проблема в том, что вы помещаете изображения в дом, которые там без причины. Если кто-то заходит на страницу с отключенным css, это может его сбить с толку. Помните, что ваш сайт должен быть полностью функциональным (в идеале) с отключенными javascript и css. - person Ali; 09.09.2011
comment
Спасибо за совет. Это имеет смысл. Блок случайных изображений в конце страницы действительно запутал бы пользователя. - person Dominor Novus; 10.09.2011

arrow_upward
1
arrow_downward

Привяжите к mouseover/out и mousedown/up и сохраните состояния, чтобы событие mouseout не удаляло коричневый значок, пока кнопка мыши все еще нажата. Затем вызовите функцию и посмотрите, нажата ли кнопка мыши или мышь находится над значком. Если нет, установите изображение по умолчанию.

$('#img').mouseover(function() {
    $(this).data('over',true);
    updateImage($(this));
}).mousedown(function() {
    $(this).data('down',true);
    updateImage($(this));
}).mouseup(function() {
    $(this).data('down',false);
    updateImage($(this));
}).mouseout(function() {
    $(this).data('over'false);
    updateImage($(this));
});

function updateImage(elem) {
    if (elem.data('down')) {
        elem.attr('src','brown.png');
    } else if (elem.data('over')) {
        elem.attr('src','yellow.png');
    } else {
        elem.attr('src','green.png');
    }
}
person Wulf    schedule 08.09.2011
comment
Эй, Вульф. Я выбрал подход CSS, потому что он требует меньше кода. - person Dominor Novus; 09.09.2011

arrow_upward
1
arrow_downward

Вы можете использовать метод hover вместе с событиями mousedown и mouseup и просто соответствующим образом изменить атрибут src изображения:

$("#yourImageId").hover(function() {
    $(this).attr("src", "yellow-over.png");
}, function() {
    $(this).attr("src", "green-default.png");
}).mousedown(function() {
    $(this).attr("src", "brown-mousedownclick.png");
}).mouseup(function() {
    $(this).attr("src", "green-default.png");
});
person James Allardice    schedule 08.09.2011
comment
Спасибо за пример кода, но подход CSS, предоставленный Сенадом, похоже, требует меньше кода. В данном конкретном случае есть ли какое-либо преимущество в использовании jQuery по сравнению с CSS? - person Dominor Novus; 09.09.2011