HTML页面中的图像映射不提供响应输出
HTML页面中的图像映射不提供响应输出
提问于 2017-07-28 21:22:22
我试图在html页面中显示一个图像，在该图像中，我有6个圆圈，所有6个圆圈，我想让他们可以点击。
我已经实现了该功能，但它是静态的。这意味着，每当我在手机中查看该图像时，所有可点击的圆圈都不在正确的位置。
如何使图像地图具有响应性。
下面是我使用的代码
<div>
<img usemap="#planetmap" width="588px" height="471px" style="display: block;margin: 0 auto;" src = "domains.png";>
<map name="planetmap">
<area shape="circle" coords="327,70,66" href="#" target="_blank" alt="" />
<area shape="circle" coords="160,165,66" href="" target="_blank" alt="" />
<area shape="circle" coords="490,166,66" href="" target="_blank" alt="" />
<area shape="circle" coords="162,358,66" href="" target="_blank" alt="" />
<area shape="circle" coords="490,358,66" href="" target="_blank" alt="" />
<area shape="circle" coords="327,451,66" href="" target="_blank" alt="" />
</map>
<div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="jquery.rwdImageMaps.min"></script>
<script>
$(document).ready(function() {
$('map').imageMapResize();
});
</script>回答 1
Stack Overflow用户
发布于 2017-07-28 21:34:20
当我试图在网页上做出一些响应性的东西时，我会做以下两件事中的一件:一是使用“媒体查询”；二是使用像“Bootstrap”这样的前端CSS框架。就我个人而言，我更喜欢后者。
下面是一个媒体查询的示例，当满足特定条件时，它将减小指定图像的大小(这将放在CSS文件中)：
@media (min-width: 700px)
{
.map { width: 400px; height: 400px; }
}现在，如果设备的宽度满足条件，指定的css代码将应用于.map元素。
这是一个非常基本的例子，但我认为它会让你走上正确的道路。您可以修改媒体查询以更改地图的尺寸，以适应不同的屏幕大小。有关更多详细信息，请查看此处：https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45374671
复制相关文章
相似问题
腾讯云开发者
