如何在<area coords>周围设置边框？
如何在<area coords>周围设置边框？
提问于 2015-06-19 17:05:12
我希望周围的活动链接部分的图像，这是由坐标定义的边界。我目前已经实现了当用户单击时，可以使用以下命令查看轮廓: outline-color，这要归功于href。我需要在默认指定的坐标周围有一个边框。我在CSS没有太多的经验，所以一些指导将不胜感激。如果我需要在各自的时间间隔标记它。使用javascript会是一个很好的实践吗？
<!DOCTYPE html>
<html>
<style>
img[usemap], map area[shape]{
outline-color: #F00;
}
</style>
<body>
<img src="unnamed.png" usemap="#mark">
<map name="mark">
<area shape="rect" coords="10,10,50,50" href="#">
</map>回答 4
Stack Overflow用户
发布于 2021-01-03 05:58:48
我们可以像这样要求区域始终处于焦点上
<img src="unnamed.png" usemap="#mark">
<map name="mark">
<area onblur="this.focus()" autofocus shape="rect" coords="10,10,50,50" href="#">
<!-- here ^ I say to let it always on focus -->
</map>希望它能为你工作！^^
Stack Overflow用户
发布于 2021-04-19 08:51:06
如果您向地图元素添加边框，您将注意到它显示在图像之后(而不是图像上方)，并且它看起来是空的(宽度为零，高度为零)。因此，在本例中，我手动添加了一个等于map area/2的填充(以便让它具有正确的宽度和高度)，并将元素位置更改为绝对位置(因此边框位于图像上)。我还必须手动添加页边距以将元素放置在适当的位置。
Ps:黄色矩形表示图像。
#mark {
padding: 20px;
border: 2px solid red !important;
margin-left: 10px;
margin-top: 10px;
position:absolute;
}
#mark:hover {
border: 2px solid blue !important;
cursor: pointer;
}
img{
position:absolute;
}<body>
<img usemap="#mark" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/4QAiRXhpZgAATU0AKgAAAAgAAQESAAMAAAABAAEAAAAAAAD/2wBDAAIBAQEBAQIBAQECAgICAgQDAgICAgUEBAMEBgUGBgYFBgYGBwkIBgcJBwYGCAsICQoKCgoKBggLDAsKDAkKCgr/2wBDAQICAgICAgUDAwUKBwYHCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgr/wAARCAClAWEDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD9EKKKK/xjP6oCiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKAP/9k=">
<map name="mark" id="mark">
<area shape="rect" coords="10,10,50,50" href="#">
</map>
Stack Overflow用户
发布于 2015-06-19 17:14:12
从这里我可以看到你并没有真正的使用锚标签，而是一个面积标签，但是假设这是你选择的方法，而不是使用锚标签。请遵循以下内容：
<style>
area:link, area:hover, area:active, area:focus {
border: 5px #f00 solid;
}
</style>
<body>
<img src="unnamed.png" usemap="#mark">
<map name="mark">
<area shape="rect" coords="10,10,50,50" href="#">
</map>或者，如果你想用一个实际的锚标签来做这件事，也许
<style>
a:link, a:hover, a:active, a:focus {
border: 5px #f00 solid;
}
</style>
<body>
<img src="unnamed.png" usemap="#mark">
<map name="mark">
<a shape="rect" coords="10,10,50,50" href="#"></a>
</map>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30934139
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号