0

私のページでは、グリッド ビューで白黒画像のリストを表示したいと考えています。この画像の上にマウスを置くと、カラー画像が表示されます。マウスを離すと、再び白黒画像が表示されます。

特定の画像（つまり、白黒画像）をクリックすると、同時にカラー画像に変わり、これに加えて目盛り画像が追加されます。

次のスクリプトとhtmlコードを使用しました

脚本

$(".swap_image").live('click', function() {
if($(this).attr("class") == "swap_image") {
    this.src = this.src.replace("_blackwhite", "_color");
    $('#tick_' + $(this).attr('rel')).show();
} else {
    this.src = this.src.replace("_color", "_blackwhite");
    $('#tick_' + $(this).attr('rel')).hide();
}
$(this).toggleClass("color");
return false;});

HTML

<img id="tick_{{img.id}}" src="{{MEDIA_URL}}img/tick.png" style="position:absolute;" ><a href="#"><img rel="{{img.id}}" src="{{MEDIA_URL}}{{ img.logo_blackwhite }}" onmouseover="this.src='{{MEDIA_URL}}{{ img.logo_color }}'" onmouseout="this.src='{{MEDIA_URL}}{{ img.logo_blackwhite }}'" class="swap_image" /></a>

上記のコードを使用しましたが、すべて正常に動作しますが、マウスをもう一度離すと、画像が白黒の画像に変わります（マウスアウト機能を使用したため）

他に利用可能なより良いアイデアはありますか？また

この問題からどのように克服するのですか？前もって感謝します

4

2 に答える 2

1

クリックしたときに画像にクラスを追加することをお勧めします。その後、mouseout 関数が実行されるときに、クラスが存在しない場合にのみ画像を白黒に戻す if/then を含めるだけです。

于 2012-10-11T06:29:12.930 に答える
0

画像をクリックすると、そこに足跡が残ります。画像のクラスを変更するように、マウスアウト関数で、画像にその特定のクラスがあるかどうかを確認します。何もしない場合は、画像の色を変更します。

于 2012-10-11T06:34:58.740 に答える