Question

我有一个带有class="img-responsive"的图像，上面有链接。问题是，当图像大小改变时，坐标将不在正确的位置。

如何根据动态图像的大小为链接设置动态坐标？

<img class="img-responsive" usemap="#image-map" src="/Content/Images/news/(8).png" alt="">
<map name="image-map">
     <area coords="419,64,15,179" shape="rect" href="" target="" alt="" title="">
     <area coords="13,184,420,277" shape="rect" href="" target="" alt="" title="">
     <area coords="14,283,420,374" shape="rect" href="" target="" alt="" title="">
     <area coords="13,380,418,473" shape="rect" href="" target="" alt="" title="">
     <area coords="14,481,419,572" shape="rect" href="" target="" alt="" title="">
</map>

Answer 1

基于@ShareWin的最新评论，这里是使用Jquery的解决方案。

几年前，我面临着同样的挑战。偶然地，我发现了一个Jquery插件，它可以根据图片的大小来更改coodinates。插件调用jQuery RWD Image Maps。

以下是使其正常工作的步骤：

拍摄原始图片并创建区域线（我使用了Gimp）
将原始图片发布到您的Web项目中。
将jquery和此插件导入您的网站。

因此该插件可以正常工作，存在一些限制。

下面是示例代码：

<div id="yourDivId" ...>
  <img src="yourImage" class="map" usemap="#nameofImagemap" id="elementid" ..>
  <map name="nameofImagemap">
    <area shape="rect" coords="x,x,x,x" alt="Tooltip" href="yourTarget" />
    ...
  </map>
</div>

javascript调用如下：

$( document ).ready(function()
    {  
        $('#yourDivId img').rwdImageMaps();
    }

重要说明：每当二手图片的尺寸改变时，您都必须重新创建区域地图。

如何在HTML中的动态尺寸图片上放置一些动态尺寸链接？

1 个答案: