JQueryのホバー、イメージマップ、ループ、配列

Question

多数の奇妙な図形を組み込んだベースエリアイメージマップの上にロールオーバーのためのjQueryホバーメソッドを使用したいので、それぞれの正確なシェイプをロールオーバーするとイメージスワップと.innerhtmlは別のテキストブロックに入れ替えます。私は完全に透明なプレースホルダーの「ゼロ」画像から始め、次にロールオーバー時にライブ画像マップ領域の上にあるPNGにスワップし、次にロールアウト時にゼロ画像に戻します。

したがって、1つのエリアマップゾーンのコードは以下のようになります。ここで、areamapImage1は、ベース画像の座標ゾーンに相当する。

$('#areamapImage1').hover(
    function() { 
     $('#imageSwap').attr('src','images/image1.png'); 
    }, 
    function() { 
     $('#imageSwap').attr('src','images/image0.png'); 
}); 

これは、各ホバー機能を明示的に宣言する限り、これは魅力的な働きをします。大量の不要なコードを生成する20枚の画像の場合、明らかに、それは配列とループのために悲鳴を上げる。だから... 2つの配列を塗りつぶすのは簡単でなければならない：1つはイメージマップ領域用、もう1つはスワップイメージ用。ループの後のコンソールロギングは、私が期待するものを私に与えますが、ホバー機能は動作しません。 JSで何もしたことがないので、ここではJS/jQueryの構文やスコープのために脳死演算子エラーがあると強く疑われます。私が知る限り、変数はホバー機能（？）で使用できるはずです。どちらの配列も文字列を返します。 jQueryには、セレクタを一重引用符で囲む構文があります。引用符を明示的に含めるようにimageArea配列を設定しようとすると、ホバーが非常に奇妙な構文エラーを投げたので、jQueryは通常の文字列を代わりに使用すると仮定します。

ありがとうございました！

$(document).ready(function() { 

    // image preload 
    var imageSource = []; 
    imageSource[0] = 'images/image0.png' //load 0 position with "empty" png 
    var imageAreas = []; 

    // area map and image array fill 
    for (var i=1; i<21; i++) { 
     imageSource[i] = 'images/image' + i + '.png'; // 
     imageAreas[i] = '#areamap_Image' + i; 

    $(imageAreas[i]).hover( // hover function 

     function() { 
      $('#imageSwap').attr('src',imageSource[i]); 
     }, 
     function() { 
      $('#imageSwap').attr('src','images/image0.png'); 
    }); 

}; 

}); 

Answer 1

投稿されたように、あなたのホバーコールはあなたのforループ内にないので、i = 21のためだけに実行されます。

EDIT：これを展開し、実際には別の方法を提案します：最初にすべてのエリアマップをループし、jQueryの 'data'呼び出しを使用していくつかの情報を追加します。そうすれば、すべてのエリアマップに同じホバー機能を割り当てることができます。

例：

$(document).ready(function() { 
    for(var i = 1; i < 21; i++) { 
    $('#areamap_Image' + i).data('rolloverImage', 'images/image' + i + '.png'); 
    } 

    // Replace 'area' with a more specific selector if necessary 
    $('area').hover(
    function() { 
     $('#imageSwap').attr('src', $(this).data('rolloverImage')); 
    }, 
    function() { 
     $('#imageSwap').attr('src', 'images/image0.png'); 
    } 
); 
});