实现一个圆形的可点击区域
1 使用css属性将一个div变成圆形
效果
<!DOCTYPE html>
<html>
<head>
<title>two</title>
<style>
.test{
width: 100px;
height: 100px;
border-radius: 50%;
/* 下面属性不重要 */
background-color: aqua;
}
</style>
</head>
<body>
<div class="test">
</div>
<script>
</script>
</body>
</html>
2 使用map和area来设置圆形区域
这是在图片中心设置一个点击区域
<!DOCTYPE html>
<html>
<head>
<title>one</title>
<style>
.test-div {
width: 400px;
height: 400px;
background-color: aquamarine;
}
</style>
</head>
<body>
<img src="https://www.runoob.com/try/demo_source/planets.gif" class="test-div" usemap="#mapOne">
</img>
<!-- <div class="test-div" usemap="#mapOne">
</div> -->
<map name="mapOne">
<!-- <area shape="rect" coords="0,0,82,126" alt="Sun" href="www.baidu.com"> -->
<area shape="circle" coords="200, 200, 50" target="_blank" href="www.baidu.com">
</map>
</body>
</html>
在实验室使用img标签可以点击, 但是用div就没有想要效果
这是我的签名
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 本地部署 DeepSeek:小白也能轻松搞定!
· 如何给本地部署的DeepSeek投喂数据,让他更懂你
· 从 Windows Forms 到微服务的经验教训
· 李飞飞的50美金比肩DeepSeek把CEO忽悠瘸了,倒霉的却是程序员
· 超详细,DeepSeek 接入PyCharm实现AI编程!(支持本地部署DeepSeek及官方Dee