如何在 <div></div> 中包裹图像贴图？

Question

我在使 .wrap 和 .wrapAll 方法在我的图像映射上工作时遇到了一些困难。我假设这是因为 map 不会像图像或输入标签那样自动关闭。

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

我想将图像和图像映射一起包装到 div 中，以便我可以插入 canvas 和 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 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.

不完全是。 map_ref 和 img_ref 的选择器不匹配任何元素。您需要更新它们以便它们匹配元素，并将它们都包含在 jQuery 选择器中。

希望对您有所帮助！

如何在 <div></div> 中包裹图像贴图？

How to wrap an mmage map in <div></div>?

javascript

jquery

imagemap