I am having some difficulty getting the .wrap and .wrapAll methods to work on my image map. I am assuming this is because map
does not self close like an image or input tag.
$.fn.setupV2 = function(map) {
map_ref = "map[attribute='" + map + "']";
img_ref = "img[usemap='\\#" + map + "']";
$(map_ref).wrapAll('<div class="mapContainer"></div>');
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>
I want to wrap the image and the image map into a div together so I can insert a canvas and CSS styling in. Is there a way to do this outside of injecting the HTML or having it done in the HTML to begin with?
You'd need to adjust your selectors so that jQuery grabs both the map, and the img. Something like this would work:
$.fn.setupV2 = function(map) {
map_ref = "map[name='"+ map+"']";
img_ref = "img[usemap='#" + map + "']";
$(map_ref + ', ' + img_ref).wrapAll('<div class="mapContainer"></div>');
};
JS Fiddle: https://jsfiddle.net/igor_9000/p0mLhecg/
I am having some difficulty getting the .wrap and .wrapAll methods to work on my image map. I am assuming this is because map does not self close like an image or input tag.
Not exactly. Your selector for map_ref
and img_ref
waren't matching any elements. You'd need to update them so they match an the elements, and include both of them in the jQuery selector.
Hope that helps!