如何使用工具提示创建响应式图像地图？答案

【问题标题】：How to create responsive image maps with tooltips?如何使用工具提示创建响应式图像地图？
【发布时间】：2019-08-12 14:43:39
【问题描述】：

我创建了一个基于 JS 的工具提示，适用于图像映射。我遇到的问题是它不适用于小型笔记本电脑屏幕或浏览器窗口最小化。我真的很感谢在这方面的一些帮助。

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

图像映射

<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;
}

(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); }
}());

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

【问题讨论】：

标签： javascript responsive-design tooltip imagemap

【解决方案1】：

如果你用百分比定义你的坐标，你可以设置一个

img {
  max-width: 100%;
}

正确处理秤。

如果您的坐标不能以百分比表示，则必须使用 window resize 事件来使用 transform: scale(...) 属性缩放图像以保持坐标位置。

祝你有美好的一天。

【讨论】：

谢谢！我可以将坐标更改为百分比，但这将是很多手动工作。我会尝试找出resize 事件......嗯，这对我来说将是一个棘手的问题。
不客气。如果不是太多工作，我肯定会选择百分比值。