Обнаруживание изображения Карта в <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>'); 
}; 

В основном я хочу, чтобы обернуть изображение и изображение карты в DIV вместе, так что я могу вставить холст и CSS стили в. Есть ли способ сделать это за пределами инъекции HTML или с его помощью в HTML для начала?

Answer 1

Вам нужно будет настроить селектора так, чтобы jQuery захватывал как карту, так и img. Что-то, как это будет работать:

$.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.

Надеюсь, что это поможет!