jQuery Image Swap для мыши и мыши вниз

Question

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

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

Пример:

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

<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. Элементу ссылки дается класс, который стилизует его блоком в размерах замены изображений. Три изображения применяются в качестве фоновых изображений к по умолчанию, падению и активным состояниям элемента ссылки. Решение и демонстрационный код Сенада размещены ниже.

Answer 1

Я бы пошел с 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; }); });

Answer 2

Я бы пошел с предварительные изображения с использованием jQuery сначала, а затем обязательный hover а также mousedown на вашей img элемент и изменение атрибута SRC на правильное изображение.

я хотел бы использовать hover Поскольку это будет справляться mouseout так же как mouseover.

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

ОБНОВИТЬ

Вам не нужно использовать jQuery для hover Эффект, вы можете сделать это с CSS. Затем на mousedown а также mouseup Измените классы CSS для достижения желаемых эффектов.

Answer 3

Свяжитесь с Mouseover/Out и Mousedown/Up и сохраните штаты, чтобы мыши-эвета не удалили коричневую икону, пока мышь-пушина еще не работает. Затем вызовите функцию и посмотрите, если нажатой к мыше, или мышь через значок. Если нет, установите изображение по умолчанию.

$('#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');
    }
}

Answer 4

Вы можете использовать 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");
});