我如何使一个响应图像地图，其中图像和热点自动调整大小与窗口

How do I make a responsive image map where the image AND hotspots automatically resize with window?

本文关键字：图像 调整 热点 窗口 何使一 响应 地图      更新时间：2023-09-26

首先，如果这个问题的措辞很奇怪，我很抱歉，因为我的上一个问题被删除了，我正试图把代码放在我的问题上，使我的问题更好。我只需要得到这个编码的帮助。我在图像映射上尝试了几个jquery/javascript，没有一个有效。我尝试过的有:查看源代码:http://home.comcast.net/~ urbanjost/IMG/resizeimg.htmlhttps://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>

有人能帮我吗?

我以前没有尝试过，但一个可能的解决方案可能是使用jQuery/JS来确定窗口宽度，并基于此更新图像和地图。第一种方法是根据设备设置不同的宽度。第二种方法是使用窗口的动态方法。调整大小，使值根据窗口宽度动态更新。

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

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

希望这对你有帮助…

相关文章：