如何在<area coords>周围设置边框?

Sou*_*Das 8 html css html5 imagemap css3

我想要一个由坐标定义的图像的活动链接部分周围的边框.我目前已经实现了这样的程度:当用户点击时,通过使用: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>
Run Code Online (Sandbox Code Playgroud)

jsg*_*jsg -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>
Run Code Online (Sandbox Code Playgroud)

或者如果你想用实际的锚标签来做到这一点

<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>
Run Code Online (Sandbox Code Playgroud)

  • 我想使用区域标签。实际上,红色框出现在图像之外。有任何想法吗? (6认同)