jquery image maps 基于jquery的图片热点链接添加编辑插件
制作这个插件的的场景：有客户要求我给他做一个图片banner，且一张图片上会有多个链接。思前想后决定制作这个插件，以便后用。
使用：
[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Image Maps test</title>
<script type="text/javascript" language="javascript" src="javascript/jquery-1.4.2.min.js"></script>
<script type="text/javascript" language="javascript" src="javascript/jquery.image-maps.js"></script>
<script type="text/javascript" language="javascript">
$(function(){
$('#imgMap').imageMaps();
});
</script>
</head>
<body>
<div id="imgMap">
<img src="womanExercise150.jpg" name="test" width="417" height="264" border="0" usemap="#Map" ref='imageMaps' />
<map name="Map">
<area shape="rect" coords="203,134,383,187" href="//nowjava.com" />
</map>
</div>
</body>
</html>
[/code]
使用说明:
<div id=”imgMap”>为整个编辑功能的容器，其中包括两个部分：
1、img标签，当然这个img标签外层你可以再嵌套其他的标签，值得注意的是ref=’imageMaps’这个属性，这是必需的，不然程序将忽略掉这个图片。
2、map标签，name属性与img标签的usemap属性对应起来，这个标签包含初始化时这个图片具有的热点链接。
$(‘#imgMap’).imageMaps();绑定插件功能。
使用：
[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Image Maps test</title>
<script type="text/javascript" language="javascript" src="javascript/jquery-1.4.2.min.js"></script>
<script type="text/javascript" language="javascript" src="javascript/jquery.image-maps.js"></script>
<script type="text/javascript" language="javascript">
$(function(){
$('#imgMap').imageMaps();
});
</script>
</head>
<body>
<div id="imgMap">
<img src="womanExercise150.jpg" name="test" width="417" height="264" border="0" usemap="#Map" ref='imageMaps' />
<map name="Map">
<area shape="rect" coords="203,134,383,187" href="//nowjava.com" />
</map>
</div>
</body>
</html>
[/code]
使用说明:
<div id=”imgMap”>为整个编辑功能的容器，其中包括两个部分：
1、img标签，当然这个img标签外层你可以再嵌套其他的标签，值得注意的是ref=’imageMaps’这个属性，这是必需的，不然程序将忽略掉这个图片。
2、map标签，name属性与img标签的usemap属性对应起来，这个标签包含初始化时这个图片具有的热点链接。
$(‘#imgMap’).imageMaps();绑定插件功能。
下载方法：
1、请用微信扫描下方二维码关注时代Java公众号，或者微信搜索时代Java或NowJava关注。
（如已经关注，请直接发送编号）
（如已经关注，请直接发送编号）
2、在时代Java公众号里发送编号：5911
5911
3、发送后，将立刻收到 “验证码已经接收成功” 的回复，即可选择线路下载：
通用网络下载移动网络下载电信网络下载
本文系作者在时代Java发表，未经许可，不得转载。
如有侵权，请联系nowjava@qq.com删除。
编辑于
关注时代Java
下载资源
下载订阅
- 后台管理UI模板框架 AdminLTE 3.0中文免费下载，AdminLTE_CN-3.0.5.zip 官方中文翻译版。
- Java 连接 MySQL 8.0 以上 JDBC 驱动包下载 mysql-connector-java-8.0.21.jar 官方最新版
- windows Java/JDK14下载 jdk-14.0.2_windows-x64_bin.exe 官方安装版
- Java JDBC 驱动包下载，MySQL 8及以上适用， mysql-connector-java-8.0.22.jar 官方版。
- 在线HTML编辑器 CKEditor5 下载和使用方法，支持多种模式。
- Windows 版 64位 Redis 6.0下载，最新官方源码由Cygwin软件编译。
- Eclipse Spring Boot maven web demo 简单项目实例
- Windows Java/JDK15下载 jdk-15_windows-x64_bin.exe 官方安装版
- html5手机触屏左右滑动图动画切换效果
关注时代Java