javascript - 如何使用工具提示创建响应式图像 map ？

Question

我创建了一个基于 JS 的工具提示，适用于图像 map 。但我遇到的问题是，它无法在小笔记本电脑屏幕上或浏览器窗口最小化时运行。我真的很感激在这方面的一些帮助。

这是一个 codepen 示例，https://codepen.io/ArshRai/pen/LwRGvZ

图像 map

<img src="http://lorempixel.com/output/food-q-c-350-350-5.jpg" usemap="#foodmap">
<map id="#foodmap" name="foodmap">
  <area class="area" shape="rect" coords="0,0,170,100" href="#" target="_self" title="Lorem ipsum dolor sit amet, &lt;br&gt; sea no laoreet noluisse suavitate, mei melius laoreet ne. Id modus dicta neglegentur pro.  Prima delicatissimi ex sed, est in iriure epicurei consequuntur. Ne malis nulla luptatum vis. Vim quodsi lucilius intellegam no." />

  <area class="area" shape="rect" coords="187,0,342,188" href="#" target="_self" title="Carrot" />

  <area class="area" shape="rect" coords="169,182,350,350" href="#" target="_self" title="Cucumber" />

  <area class="area" shape="poly" coords="78,133,158,182,162,349,0,349,0,283" href="#" target="_self" title="Red Pepper"/>
</map>

CSS

#tooltip {
 background: #607D8B;
 color:#ffffff;
 border: 1px solid #009688;
 padding: 3px 10px;
 z-index:9999;
}

JS

(function () {
  var ID = "tooltip", CLS_ON = "tooltip_ON", FOLLOW = true,
  DATA = "_tooltip", OFFSET_X = 20, OFFSET_Y = 10,
  showAt = function (e) {
   var ntop = e.pageY + OFFSET_Y, nleft = e.pageX + OFFSET_X;
   $("#" + ID).html($(e.target).data(DATA)).css({
   position: "absolute", top: ntop, left: nleft
    }).show();
  };
   $(document).on("mouseenter", "*[title]", function (e) {
    $(this).data(DATA, $(this).attr("title"));
    $(this).removeAttr("area[title]").addClass(CLS_ON);
    $("<div id='" + ID + "' />").appendTo("body");
    showAt(e);
    });
    $(document).on("mouseleave", "." + CLS_ON, function (e) {
     $(this).attr("title", $(this).data(DATA)).removeClass(CLS_ON);
     $("#" + ID).remove();
    });
    if (FOLLOW) { $(document).on("mousemove", "." + CLS_ON, showAt); }
}());

我只是不知道需要做什么才能使其在最小化的浏览器和小屏幕上运行。

Answer 1

如果您以百分比定义坐标，则只需设置一个

img {
  max-width: 100%;
}

正确处理秤。

如果您无法获得百分比坐标，则必须使用窗口resize事件来使用transform:scale(...)缩放图像> 属性(property)以保持您的坐标位置。

祝你有美好的一天。