Question

首先，我很抱歉，如果这个问题措辞奇怪而且关闭，我会尝试输入代码并使我的问题更好，因为我的上一个问题已被删除。我只需要帮助解决这个问题。我在图像地图上尝试了几个jquery / javascripts，但都没有。我尝试过的是：视图源：http://home.comcast.net/~urbanjost/IMG/resizeimg.html https://github.com/stowball/jQuery-rwdImageMaps

我的图片地图代码：

<img src="images/background.jpg" usemap="#banner" />
<map name="banner">
<area shape="rect" coords="109,7,435,324"
href="http://www.instituteforcreativelearners.org/" target="_blank" alt="The Institute
for Creative Learners">

<area shape="rect" coords="976,98,1295,278" href="http://www.adoptioncovenant.org/"
target="_blank" alt="Adoption Covenant">
</map>

我还尝试将图像保存为SVG文件，但它仍然没有随图像调整链接/热点的大小。（这是直接的svg代码，但我在尝试时添加了到矩形的链接）

<svg version="1.1" id="Layer_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;"
xmlns:graph="&ns_graphs;"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
 x="0px" y="0px" viewBox="0 0 2020 600" style="enable-background:new 0 0 2020 600;"
xml:space="preserve">

<style type="text/css">
.st0{fill:none;}
</style>
<image style="overflow:visible;" width="2021" height="601" xlink:href="background.jpg" 
transform="matrix(1 0 0 1 0.5 -0.5)">

</image>
<rect x="143.3" y="0" class="st0" width="468" height="454.8"/>
<rect x="1310.4" y="127.7" class="st0" width="468" height="249"/>
</svg>

有没有人可以帮助我？

Answer 1

我之前没有尝试过这个，但可能的解决方案可能是使用jQuery / JS来确定窗口宽度，并根据它更新图像和地图。第一种方法是基于设备设置单独的宽度。第二种方法是使用window.resize的动态方法，以便根据窗口宽度动态更新值。

所以第一种方法看起来像......

$(window).resize(function(){

if($(window).width()>=640){
    //set your html for this screen width
}
else if($(window).width()>=320){
//set your html for this screen width
}
});

第二种方法就像是

$(window).resize(function(){
var x, y, imgMap;
x = $(window).width() - 200;//update coords...

imgMap = "<html for img map here>";

}
});

希望这有点帮助...

Here's info on resize

如何在图像和热点自动调整窗口大小的位置制作响应式图像映射？

1 个答案: