html map area 换url路径实现点击事件绑定-JQuery版

最新推荐文章于 2024-06-26 08:42:55 发布

[前端]-小王

最新推荐文章于 2024-06-26 08:42:55 发布

阅读量459

点赞数

本文链接：https://blog.csdn.net/wy080815/article/details/119668491

版权

html map area 换url路径实现点击事件绑定-JQuery版

文章目录

html map area 换url路径实现点击事件绑定-JQuery版
一、这是神马？
- 1.JavaScript
- 2.JQuery
二、使用步骤
- 1.直接上demo
总结

# 小伙伴们点赞、收藏、评论是对我最大的支持！！提示：以下是本篇文章正文内容，下面案例可供参考

一、这是神马？

1.JavaScript

JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。

2.JQuery

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由John Resig发布。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

二、使用步骤

1.直接上demo

代码如下（示例）：
请添加图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>html map area 换url路径实现点击事件绑定</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
</head>
<body>
    <div class="region">
        <img src="images/123.jpg" style="width: 400px; height: 300px;" usemap="#Map" class="region_button">
        <map name="Map" id="map">
            <area shape="rect" class="hotpoint shanghai" coords="100,100,150,150" href="#">
            <area shape="rect" class="hotpoint nanjing" coords="200,200,250,250" href="#">
        </map>
    </div>
    <script type="text/javascript">
        if ($('.region_button').length) {
            $('.hotpoint').unbind().bind('mouseenter', function () {
                if ($(this).hasClass('shanghai')) {
                    $('.region_button').attr('src', 'images/1234.jpg');
                } else if ($(this).hasClass('nanjing')) {
                    $('.region_button').attr('src', 'images/12345.jpg');
                }
            }).bind('mouseleave', function () {
                $('.region_button').attr('src', 'images/123.jpg');
            });
        }
        $(".shanghai").click(function () {
            console.log('我被摸了一次');
        });
        $(".nanjing").click(function () {
            console.log('我被摸了二次');
        });
    </script>
</body>

</html>