实现一个圆形的可点击区域

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就没有想要效果

posted on 2022-03-26 18:06  GameCat  阅读(69)  评论(0)  编辑  收藏  举报

导航