マウスオーバーとマウスダウンのjQuery画像スワップ

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

どんなアドバイスも攻撃されます。

受け入れられたソリューション

Senadのソリューション（以下）は、jQueryの代わりにCSSの使用を伴いました。リンク要素には、交換される画像の寸法のブロックになるようにスタイルを整えるクラスが与えられます。 3つの画像は、リンク要素のデフォルト、ホバー、アクティブ状態に背景画像として適用されます。 Senadのソリューションとデモコードを以下に示します。

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

マウスオーバー/アウトにバインドし、ムーズダウン/アップ状態を保存するため、マウスバットンがまだダウンしている間、マウスアウトイベントは茶色のアイコンを削除しません。次に、マウスバットンが押されているか、マウスがアイコンの上にあるかどうかを呼び出して外観にします。ない場合は、デフォルトの画像を設定します。

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