1

製品選択テーブルを作成しようとしています。このテーブルでは、色合いにカーソルを合わせると、メインの製品画像が (色に一致するように) 変更されます。

私が既存のスクリプトで抱えている問題は、1 つのターゲット イメージのみに影響する複数の最初のイメージに対してセットアップを機能させることができないことです。

/* Teaser image swap function */
    $('img.swap').hover(function () {
        this.src = '/images/signup_big_hover.png';
    }, function () {
        this.src = '/images/signup_big.png';
    });

このスクリプトを見つけましたが、複数の画像を受け入れるように変換する方法がわかりません。

私が持っている現在のHTMLのJSフィドル。表内の画像の 1 つにカーソルを合わせると、対応する画像が下に表示されます。

私が作成しようとしているものをよりよく理解したい場合は、ここでライブ サイトを利用できます。

私が熱心に取り組んでいることの 1 つは、画像がリンクにラップされないようにすることです。これは、クリックすると厄介なページ ジャンプが発生するためです (フォームと連携して動作するため、実際には変更できません)。

4

1 に答える 1

0

私は実際にはさらに簡単な解決策を持っています：

交換したい画像ごとに、それらを与えるだけdata-hoverで出来上がり:)

<img src="normalLocation.jpg" data-hover="newLocation.jpg" />

JS:

// this code will do the rest for you
$('img[data-hover]').hover(function () {
    $(this).attr('tmp', $(this).attr('src')).attr('src', $(this).attr('data-hover')).attr('data-hover', $(this).attr('tmp')).removeAttr('tmp');

}).each(function () {
    $('<img />').attr('src', $(this).attr('data-hover'));
});
于 2012-10-19T19:46:23.557 に答える