jQuery圖片熱點連結新增編輯外掛
阿新 • • 發佈：2019-02-08
外掛說明：
製作這個外掛的的場景：有客戶要求我給他做一個圖片banner，且一張圖片上會有多個連結。思前想後決定製作這個外掛，以便後用。
使用：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/>
<title>Image Maps test</title>
<scripttype="text/javascript"language="javascript"src="javascript/jquery-1.4.2.min.js"></script>
<scripttype="text/javascript"language="javascript"src="javascript/jquery.image-maps.js"></script>
<scripttype="text/javascript"language="javascript">
$(function(){
$('#imgMap').imageMaps();
});
</script>
</head>
<body>
<divid="imgMap">
<imgsrc="womanExercise150.jpg"name="test"width="417"height="264"border="0"usemap="#Map"ref='imageMaps'/> <mapname="Map">
<areashape="rect"coords="203,134,383,187"href="http://yiye.name"/>
</map>
</div>
</body>
</html>
|
使用說明:
<div id=”imgMap”>為整個編輯功能的容器，其中包括兩個部分：
1、img標籤，當然這個img標籤外層你可以再巢狀其他的標籤，值得注意的是ref=’imageMaps’這個屬性，這是必需的，不然程式將忽略掉這個圖片。
2、map標籤，name屬性與img標籤的usemap屬性對應起來，這個標籤包含初始化時這個圖片具有的熱點連結。
$(‘#imgMap’).imageMaps();繫結外掛功能。