Question

该网站的桌面版本有一个imagemap。当站点进入平板电脑或移动视图时，需要禁用imagemap，以便导航区域可以显示更简单的版本。我试过了

map { display: none; }

但地图仍然存在。有什么想法吗？

Answer 1

我有一份具有相同要求的作业。我解决这个问题的方法是在我的html文件中放置2个<img>标签，一个名为“desktopImage”，另一个名为“mobileImage”，并将图像映射仅链接到桌面图像。然后在我的default.css文档中，我在移动版display:none标记上使用了<img>，反之亦然mobile.css doc。

例如：

在HTML文件中：

<img id="desktopImage" src="someimage.jpg" usemap="someimagemap" />
<img id="mobileImage" src="someimage.jpg" />

在默认的css doc中：

#mobileImage
{
  display: none;
}

在移动css doc中：

#desktopImage
{
  display: none;
}

注：

我知道这个帖子已经超过一年了，但是我无法找到这个问题的答案，这个问题不涉及使用Javascript或响应式图像映射＆amp;浏览器插件。这很可能不是最好的方法，但对于介绍HTML＆amp; CSS课程作业（我的情况），这样做会很好

Answer 2

尝试在媒体查询中添加.map和此CSS类：

.map {
     display: none: !important
     position: absolute !important
     left: -9999px !important
}

使用CSS禁用图像映射。

2 个答案: