map area 用法示例点击不同位置,实现不同功能

晓月木鱼

于 2020-01-02 10:18:32 发布

阅读量667

点赞数

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/weixin_43560960/article/details/103799888

版权

前端专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了如何使用HTML的图像映射功能配合jQuery来实现不同形状区域的点击事件响应，包括圆形、矩形和多边形。通过具体代码示例，展示了如何为每个区域绑定点击事件并输出相应的信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基础用法参考：点击查阅文档


  <div>
        <img src="./media/img/1-130Z2000247.jpg" usemap="#areaTest">
        <map name="areaTest" id="areaTest">
            <area shape="circ" coords="50,50,50" id="circ">
            <area shape="rect" coords="100,100,300,300" id="rect">
            <area shape="poly" coords="0,100,50,150,100,200,150,250,100,300,50,350" id="poly">
            <area shape="default" id="default">
        </map>
    </div>
    <!-- <script src="./plugin/vue.js"></script> -->
    <script src="./plugin/jquery-3.1.0.js"></script>
    <script>
        $('#circ').on('click',function() {
            console.log($(this))
            console.log('circ')
        })
        $('#rect').on('click',function() {
            console.log($(this))
            console.log('rect')
        })
        $('#poly').on('click',function() {
            console.log($(this))
            console.log('poly')
        })
        $('#default').on('click',function() {
            console.log($(this))
            console.log('default')
        })
    </script>