使用map结合jquery.rwdImageMaps.js+jquery.maphilight.js实现图片分区点击且支持自适应及高亮（一般用于地图）

首先，确保你已经在你的项目中包含了jQuery库和相关的插件。以下是一个简单的HTML和JavaScript示例，展示如何使用map和image maps来实现图片区域的点击功能。

HTML:




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Image Map Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="path/to/jquery.rwdImageMaps.min.js"></script>
    <script src="path/to/jquery.maphilight.min.js"></script>
    <link rel="stylesheet" href="path/to/jquery.maphilight.css">
    <style>
        img {
            width: 500px;
        }
    </style>
</head>
<body>
    <img usemap="#myMap" src="path/to/your_image.png" alt="My Image Map">
    <map name="myMap">
        <area href="#" coords="100,100,200,200" class="area1">
        <area href="#" coords="250,150,350,350" class="area2">
        <!-- Add more areas as needed -->
    </map>
 
    <script>
        $(document).ready(function() {
            $('img[usemap]').rwdImageMaps();
 
            $('area').maphilight({
                fillColor: '00FF00',
                fillOpacity: 0.5,
                strokeColor: '000000',
                strokeOpacity: 0.8,
                strokeWidth: 2,
                fade: true
            }).on('click', function() {
                // Handle area click event
                var areaClass = $(this).attr('class');
                console.log('You clicked area with class: ' + areaClass);
                // Add your custom logic here
            });
        });
    </script>
</body>
</html>

在这个示例中，我们首先包含了必要的jQuery库和map highlight插件。然后，我们定义了一个图片和一个map元素，其中包含了不同的area元素。我们使用maphilight插件来突出显示被点击的区域，并且为每个区域绑定了click事件处理函数，以便在点击区域时执行自定义的逻辑。

请确保替换path/to/your_image.png和path/to/jquery.rwdImageMaps.min.js、path/to/jquery.maphilight.min.js和path/to/jquery.maphilight.css为你的实际文件路径。

注意：这个示例假设你已经正确地引入了所需的jQuery库和插件。如果你的项目中还没有这些库，你需要先通过<script>标签将它们包含进来。

使用map结合jquery.rwdImageMaps.js+jquery.maphilight.js实现图片分区点击且支持自适应及高亮（一般用于地图）

评论已关闭

推荐阅读