禁用 javascript 时隐藏图像地图坐标

Posted 2023-05-07

【中文标题】禁用 javascript 时隐藏图像地图坐标

【英文标题】：Hide image map coordinates when javascript is disabled

【发布时间】：2017-12-02 09:53:33

【问题描述】：

我有一个图像映射，我想在禁用 javascript 时隐藏它的可点击坐标，这样就只剩下图像了。我尝试在 html 正文中使用 noscript：

<noscript>
  <style type='text/css'>
    area display:none
  </style>
</noscript>

但区域坐标仍显示在图像下方。我怎样才能完全隐藏它们（最好使用纯 css 或纯 javascript）？

【问题讨论】：

只是默认不显示它们并通过javascript显示它们

我如何默认隐藏它们？ display:none 或 visibility:hidden 不起作用，甚至在地图标签上也不起作用。我想保留图像。

您可以复制图像，并制作没有usemap 属性的第二张图像，然后像您正在做的那样切换display: none。

2017年的地图？

感谢您的好主意。是否可以使用javascript添加属性usemap（用于img）或name（用于地图）？我有几个大的图像地图，复制图像会很乏味。我可以默认删除这些属性。我尝试了以下方法，但它们不起作用： var mapImage = document.getElementById('imageMap'); var att = document.createAttribute('usemap'); att.value = '#mapmap'; mapImage.setAttributeNode(att);或 document.getElementsByTagName("map").setAttribute("name", "mapmap");

【参考方案1】：

与其在 JavaScript 不可用时禁用图像映射，不如在 JavaScript 可用时才启用它？由于你只希望地图出现是启用了 JS，所以可以使用 JS 来启用它。禁用 JS 的浏览器将无法运行代码，只会显示图像。

var myMappedImages = document.getElementsByClassName("myMappedImage");
for(var i=0,len=myMappedImages.length;i<len;i++)
    myMappedImages[i].usemap = "#myimagemap";

【讨论】：

我试过了，但它无法添加 usemap 属性。我也这样做了，但没有效果： document.getElementById("imageMap").useMap = "#mapmap";