html – 可见区域标签？

发布时间：2020-12-14 21:28:03 所属栏目：资源来源：网络整理

导读：如何制作html区域/随时可见，不仅仅是焦点？似乎应该像这样简单： HTML： img src="image.png" width="100" height="100" usemap="#Map" /map name="Map" id="Map"area shape="circle" coords="50,50,50" href="#" alt="circle" //map CSS： area {border:

如何制作html<区域/>随时可见，不仅仅是焦点？

似乎应该像这样简单：

HTML：

<img src="image.png" width="100" height="100" usemap="#Map" />
<map name="Map" id="Map">
<area shape="circle" coords="50,50,50" href="#" alt="circle" />
</map>

CSS：

area {border: 1px solid red}

无论我做什么，似乎我都不能影响一个地区的造型，它真的看起来不受css的影响。有任何想法吗？另外，任何其他不可风格标签的例子？

解决方法

jQuery插件，MapHilight：

您可能会发现jQuery plugin MapHilight在这里感兴趣。

> Map of the United States Demo

HTML / CSS替代

我建议使用一个div，绝对链接。原因在于，这将非常好地降级，并将所有选项显示为链接列表。图像地图不会那么友好。此外，这种替代方案将提供相同的结果，具有更清洁和更现代的做法。

#myImage {
  position:relative; width:640px; height:100px; 
  background-image:url("bkg.jpg");
}
a.apples {
  display:block; position:absolute; 
  top:0; left:0; width:100px; height:100px;
  border:1px solid red;
}
a.taters {
  display:block; position:absolute;
  top:0; left:200px; width:25px; height:25px;
  border:1px dotted orange;
}
#myImage a span {
  display:none;
}

–

<div id="myImage">
  <ul>
    <li><a href="page1.html" class="apples"><span>Apples</span></a></li>
    <li><a href="page2.html" class="taters"><span>Taters</span></a></li>
  </ul>
</div>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!