jQuery图片热点链接添加编辑插件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://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="http://yiye.name" />
</map>
</div>
</body>
</html>
为整个编辑功能的容器,其中包括两个部分:
-
1、img标签,当然这个img标签外层你可以再嵌套其他的标签,值得注意的是ref='imageMaps'这个属性,这是必需的,不然程序将忽略掉这个图片。
-
2、map标签,name属性与img标签的usemap属性对应起来,这个标签包含初始化时这个图片具有的热点链接。
$('#imgMap').imageMaps(); // 绑定插件功能