JQuery Image Swap для мыши и мыши - PullRequest
Новая
       28

JQuery Image Swap для мыши и мыши

3 голосов
/ 08 сентября 2011

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

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

Пример:

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

<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'}" />

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

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

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

Ответы [ 4 ]

4 голосов
/ 08 сентября 2011

Я бы пошел с 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; }); });
2 голосов
/ 08 сентября 2011

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

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

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

ОБНОВЛЕНИЕ

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

1 голос
/ 08 сентября 2011

Вы можете использовать метод 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");
});
1 голос
/ 08 сентября 2011

Привязка к 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');
    }
}
...