jQuery와 이미지 맵을 사용하여 호버에서 이미지 변경

Question

이미지 맵을 사용하고있는 이미지가 있습니다. 지도에 따라 이미지의 일부를 가리키면 이미지가 바뀌므로 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" 

예를 제공하십시오.

Answer 1

To write a jQuery plugin, start by adding a new function property to the jQuery.fn object where the name of the property is the name of your plugin:

는 다음을 시도해보십시오 여전히 같은 오류가 발생합니다

(function($j) { 
    $j.fn.preLoadImages = function() { 
     //... 
    } 
})(jQuery);