div의 이미지 맵보기 div 위로

Question

그림에 여러 개의 이미지 맵을 만든 다음 이미지 위로 가져 가면 위에있는 특정 정보가 그림 아래에있는 div에서 끌어 와서 다음 채울 것입니다. 오버 이미지 위에.

<div class="runner_div"> 
    <img src="http://cooleycollective.com/test/slrc/wp-content/uploads/2013/01/Em_full.jpg" width="680" height="705" usemap="#runner_wear" /></a></p> 
<map name="runner_wear"> 
    <area shape="poly" coords="264,18,237,33,243,72,276,83,328,79,311,29," href="#hat" alt="hat" /> 
    <area shape="rect" coords="259,69,331,99" href="#" alt="glasses" /> 

    </map> 
</div> 

<div class="gear" id=hat> 
<h2>Type of hat</h2> 
    <p>I love this hat.I wore it when I was running from a bear in the zoo.</p> 
</div> 
<div class="gear" id="glasses"> 
    <p>These glasses were hand picked by a Sherpa from Kentucy!</p> 
</div> 

나는 숨길 수 없습니다하도록 된 div가 아래에 있고 싶어,하지만 나는 그것을 참조하는 이미지 위에 마우스를 가져 가면 hoverable 될 수있는 기능을 가지고. 이 코드를 작성하기 위해 jQuery를 사용해야하는지, 심지어 어떻게 작성해야하는지 잘 모르겠습니다.

코드가 다음과 같이 동작 할 것 같은 느낌이 듭니다.이 imgmap의 onmouse hover는이 이미지 맵이 참조하는 div를 표시합니다. 나는 이것이 코드 언어에서 어떻게 생겼는지 전혀 모른다. 도와 주셔서 감사합니다.

Answer 1

나는 팝업 효과를 원한다고 가정합니다.

Please see a demo I've prepared for you using your markup

다음은 작업 jQuery를

var $popup = $('.popup'); 
$('area').on({ 
    mouseover : function(e){ 
    var $this = $(this), 
     $obj = $('#'+$this.prop('alt')); 

    $popup.text($obj.text()).css({ 
     top: e.pageY + 25, 
     left: e.pageX - ($popup.width()/2), 
    }).show(); 
    }, 
    mouseout: function(){ 
    var $this = $(this), 
     $obj = $('#'+$this.prop('alt'));  

    $popup.hide(0).empty(); 
    } 
});