logo标签列表

如何在<area coords>周围添加边框？

htmlcssimagemap
15

我希望在由坐标定义的图片的活动链接部分周围加上边框。目前，当用户单击时，借助href，使用outline-color可见轮廓线。我需要默认情况下在指定的坐标周围添加边框。

由于我在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个回答
1
我们可以这样要求该区域始终保持焦点
<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>
-1
给这个区域一个ID，然后使用CSS访问它，在周围添加一个边框。
-2
从这个代码中我能看到的是，你并没有使用锚点标签，而是使用了区域标签。不过我猜想你选择这种方法是因为你更喜欢使用区域标签而非锚点标签。按照以下步骤操作：
<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>
6
我想使用area标签。实际上，红色框出现在图像外面。有任何想法吗？ - Souvik Das
这不是首选答案。 - Srikrushna
-3
如果您为地图元素添加边框，您会注意到它会在图像之后显示，并且看起来是空的（零宽度和零高度）。
因此，您可以使用JavaScript获取区域尺寸/位置，并将它们传递给地图的填充和边距样式。元素的位置需要是绝对的，以便边框覆盖图像。
附注：黄色矩形代表图像。 

function buildborder(map,area){
var coords = document.getElementById(area).coords.split(",");
document.getElementById(map).style.paddingLeft = coords[2] - coords[0] + "px";
document.getElementById(map).style.paddingTop = coords[3] - coords[1] + "px";
document.getElementById(map).style.marginLeft = coords[0] + "px";
document.getElementById(map).style.marginTop = coords[1] + "px";
}

buildborder('mark','innerarea')
#mark {
border: 2px dotted red !important;
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" id="innerarea" coords="10,10,50,50" href="#">
</map>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接