如何包装图像映射?

Posted 2021-03-27

我在使用.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，这样我就可以插入画布和CSS样式了。有没有办法在注入html之外或者在HTML中完成它？

答案

您需要调整选择器，以便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选择器中包含它们。

希望有所帮助！