jquery 图片热点

基础概念

jQuery 图片热点（Image Hotspot）是指在一张图片上定义一个或多个可点击的区域，这些区域可以是圆形、矩形或其他形状。用户点击这些区域时，可以触发相应的事件，如跳转到其他页面、弹出提示框等。

类型

圆形热点：定义一个圆形区域作为热点。
矩形热点：定义一个矩形区域作为热点。
多边形热点：定义一个多边形区域作为热点。

应用场景

地图导航：在地图图片上定义热点，点击不同区域跳转到相应的页面。
产品展示：在产品图片上定义热点，点击不同部位显示详细信息。
广告互动：在广告图片上定义热点，点击触发互动效果。

示例代码

以下是一个使用 jQuery 实现圆形热点的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Image Hotspot</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        #map {
            width: 500px;
            height: 500px;
        }
    </style>
</head>
<body>
    <img id="map" src="map.jpg" alt="Map">
    <script>
        $(document).ready(function() {
            // 定义圆形热点
            $('#map').hotspot({
                type: 'circle',
                x: 200,
                y: 200,
                radius: 50,
                callback: function() {
                    alert('You clicked the hotspot!');
                }
            });
        });
    </script>
</body>
</html>