0

イメージマップを使用しているイメージがあります。マップに応じて画像の一部にカーソルを合わせると、画像を変更したいのですが、jQuery を使用してこれを行う方法がわかりません。これが私が試みたコードです：

HTML: 

 <div class="img-center">
  <img src="img-src_off.jpg" usemap="#Map" class="feature-image" border="0" />
    <map name="Map" id="Map">
      <area shape="rect" coords="77,461,391,492" href="#" target="_blank"
            class="link-1" />
      <area shape="rect" coords="557,461,855,490" href="#" target="_blank" 
            class="link2" />
    </map>
 </div>

JS:

注: これは私が試みた JS ですが、エラーがスローされ (以下にリストされているエラー)、今何を試せばよいかわかりません。問題なく動作するコードを見つけることができれば、このコードを使用する必要はありません。

var $j = jQuery.noConflict();
  $j(document).ready(function() {
     $j.preLoadImages("img_src_01.jpg",
                     "img_src_02.jpg"
     ); 

     $j(".link1").hover(function(){
        this.src = this.src.replace("_off","_01");
        },
        function(){
        this.src = this.src.replace("_01","_off");
        }
     );

           $j(".link2").hover(function(){
        this.src = this.src.replace("_off","_02");
        },
        function(){
        this.src = this.src.replace("_02","_off");
        }
     ); 
   });

  (function(j$) {
    var cache = [];
    $j.preLoadImages = function() {
      var args_len = arguments.length;
      for (var i = args_len; i--;) {
        var cacheImage = document.createElement('img');
        cacheImage.src = arguments[i];
        cache.push(cacheImage);
      }
    }
  });

私が見るエラーは次のとおりです。

TypeError: this.src is undefined
[Break On This Error]   

this.src = this.src.replace("_off","_01");

(this error repeats itself on every hover)

そして、このエラー:

TypeError: $j.preLoadImages is not a function
[Break On This Error]   

"img_src_02.jpg"

私はJavascriptにあまり堪能ではないので、答えるときに例を提供してください。

4

1 に答える 1

1

jQuery プラグインを作成するには、新しい関数プロパティを jQuery.fn オブジェクトに追加することから始めます。ここで、プロパティの名前はプラグインの名前です。

次のことを試してください。

(function($j) {
   $j.fn.preLoadImages = function() {
        //...
   }
})(jQuery);
于 2012-08-12T19:20:32.997 に答える