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)