JQuery : 이미지 분할 및 마우스 오버시 화면 분할이 사라짐

Question

대학 프로젝트를위한 퍼즐 웹 사이트를 만들려고 노력 중이며 내가 생각한 퍼즐 중 하나가 약간 미치게되었습니다. 페이지에 PNG 이미지를 가져다가 34px 사각형으로 32px 묶음으로 나누고 커서가 위에 있으면 그 사각형을 사라지게하고 싶습니다. 내가 찾은 가장 가까운 이미지가 서로 다른 퍼즐 조각하지만 난으로 분할됩니다 this tutorial의 특정 부분입니다 Rough Diagram (슬라이더 것들을 무시)

: 여기

내가 원하는 것을 대략이다 그가 사용하는 코드를 취해서 내가해야 할 일을하도록 재 작업하는 것 같지 않습니다.

나는 어쩌면 어리 석음으로 복잡하고 매우 상황이 좋음을 알고 있지만, 너무 어려워 야한다고 생각지 않는다.

편집 : 어떤 방식 으로든 jQuery 사용자 또는 코더가 아니기 때문에 많은 노력을 기울이지 않았습니다. 내가 지금까지 사용해 왔던 것은 간신히 이해하고 아마도별로 사용하지는 않을 것이지만 그것을 게시 할 수 있습니다.

난은 .js 파일이라고 image_split.js을 만들어 그것은이 포함되어

(function($) 
{ 
    $.fn.jSplit=function(options) 
{ 
       var piece=$('<span></span>').addId("curtain" +  this.id.substring(4)).css(
     { 
      'width': 32+'px', 
      'height': 34+'px', 
      'display': 'inline-block', 
      'float': 'left', 
      'background-image': 'url("images/curtain.png")', 
      'background-position': (-32)+'px '+(-34)+'px', 
     }) 
}; 
})(jQuery); 

를 다음 HTML에서 그것을했다.

<script>    
     $(document).ready(function() { 
      $('#actor').jSplit(); 
     }); 
</script> 

이미지를 분할하기위한 것입니다. 내가 아는

<script type="text/javascript"> 
     $(document).ready(function() { 
      $("div[id^=curtain]").hover(
      function(){ 
       $("#curtain" + this.id.substring(4)).css({"visibility":"visible"}); 
      }, 
      function(){ 
       $("#curtain" + this.id.substring(4)).css({"visibility":"hidden"}); 
      } 
     ); 
     }); 
</script> 

가 작동하지 않습니다와 나는 모든이 코드는 끔찍한 확신 해요,하지만 당신보다 더 사람을 도움이된다면 모든 더 나은 것 같아요 :이 사라지게 만들기에 관해서는, 나는이 있습니다.

Answer 1

html이 생성되지 않으면 적절한 답변을 제공하기 어려울 수 있지만, 최선을 다할 것입니다. 예를 들어 JSFiddle을 포함 시켰습니다. 나는 당신이 어떻게 <span> 태그를 추가하는지 완전히 모르겠다. 그러나 나는 게으르다. 그래서 jQuery에서 처리했다.

http://jsfiddle.net/vmex151/xvvvy/

인가 당신이 찾고있는 것을 같은?