이미지 맵 배치하기 <div></div>

Question

내 이미지 맵에서 .wrap 및 .wrapAll 메소드를 작동시키는 데 어려움이 있습니다. 나는지도가 이미지 나 입력 태그처럼 자기 닫히지 않기 때문이라고 가정하고 있습니다.

HTML :

<img class="img_class" id="bottle_map" src="../images/bottle.jpg" usemap="#bottle_map"> 
<map name="bottle_map"> 
    <area shape="rect" alt="" coords="3,6,258,31" href="1" title="Saranac Legacy IPA"> 
    <area shape="rect" alt="" coords="279,5,336,32" href="2" title="four generations"> 
    <area shape="rect" alt="" coords="2,37,425,64" href="2" title="four generations"> 
    <area shape="rect" alt="" coords="1,69,386,95" href="2" title="four generations"> 
    <area shape="rect" alt="" coords="243,121,444,142" href="3" title="Matt Brewing Company"> 
    <area shape="rect" alt="" coords="4,143,186,163" href="3" title="Matt Brewing Company"> 
    <area shape="rect" alt="" coords="194,144,400,163" href="4" title="Our (great) grandfather"> 
    <area shape="rect" alt="" coords="3,163,252,187" href="4" title="Our (great) grandfather"> 
    <area shape="rect" alt="" coords="295,166,419,185" href="5" title="it's still family"> 
    <area shape="rect" alt="" coords="3,189,363,209" href="5" title="it's still family"> 
</map> 

JS/jQuery를 :

$.fn.setupV2 = function(map) { 
    map_ref = "map[attribute='"+ map + "']"; 
    img_ref = "img[usemap='\\#" + map + "']"; 
    $(map_ref).wrapAll('<div class="mapContainer"></div>'); 
}; 

은 기본적으로 내가의 캔버스와 CSS 스타일을 삽입 할 수 있도록 함께 사업부로 이미지와 이미지 맵을 포장합니다. HTML을 삽입하는 것 외에 HTML로 끝내는 방법이 있습니까?

Answer 1

jQuery가지도와 이미지를 모두 가져올 수 있도록 선택기를 조정해야합니다. 이런 식으로 뭔가가 작동합니다 :

$.fn.setupV2 = function(map) { 
    map_ref = "map[name='"+ map+"']"; 
    img_ref = "img[usemap='#" + map + "']"; 
    $(map_ref + ', ' + img_ref).wrapAll('<div class="mapContainer"></div>'); 
}; 

JS 바이올린을 : https://jsfiddle.net/igor_9000/p0mLhecg/

을 내 이미지 맵에서 작동하도록 .wrap 및 .wrapAll 방법을 점점 어려움을 겪고. 나는지도가 이미지 나 입력 태그처럼 자기 닫히지 않기 때문이라고 가정하고 있습니다.

정확하게는 아닙니다. map_ref 및 img_ref에 대한 선택자는 요소와 일치하지 않습니다. 요소와 일치하도록 업데이트해야하며 두 요소 모두 jQuery 선택기에 포함해야합니다.

희망 하시겠습니까?