❶ js 如何在圖片上打點
原理是用canvas或svg來做。找一個canvas或svg相關的類庫，調用之後能方便地畫點和線就行了，當然業務邏輯要自己寫，沒有現成的。
❷ 如何利用javascript實現JPG圖片的在線標注
滑鼠在圖片上點擊時,用event.clientX和event.clientY取得點擊的坐標,
再動態向<map>添加一個<area>
把滑鼠分別放到圖片的左上角和中間,是不是你要的效果?
<body>
<img src="mymap.jpg" border="0" usemap="#mymap" style="width:100px; height:100px;"/>
<map name="mymap" id="mymap">
<area
shape="circle"
coords="50,50,15"
href ="#"
target ="_blank" alt="x:50,Y:50,半徑:15" />
<area
shape="rect"
coords="0,0,15,15"
href ="http://www..com"
target ="_blank"
alt="跳至網路" />
</map>
</body>
❸ JS動態在圖片上 繪制熱區 並 記錄坐標！ 哪位大神會啊
根據圖片設置希望的熱區坐標。代碼如下：
js代碼 ：更多問題到問題求助專區http://bbs.hounwang.com/
// MAP1名稱
var mapName1 = "Map1";
// MAP1ID
var mapId1 = "MapId1";
// 指定DIV名稱
var divnId = "mask";
// 圖片路徑
var imgPath = "";
main = function(type) {
var obj;
switch(type) {
case "aa" :
// 指定圖片及熱點對象取得
obj = imgMapList[0];
// 創建圖片及熱點
creatImpAndHot(obj);
break;
}
}
creatImpAndHot = function(hotObj) {
// 創建熱點MAP對象
var map = document.createElement_x("Map");
// 設置MAP名稱
map.name = mapName1;
// 設置MAPID
map.id = mapId1;
// 熱點列表取得
var length = hotObj.map.length;
for (var i = 0; i < length; i++) {
var tempMap = hotObj.map[i];
// 創建熱區對象
area = document.createElement_x("area");
// 設置熱區類型
area.shape = tempMap.shape;
// 設置熱區坐標
area.coords = tempMap.coords;
// 設置熱區對應鏈接
area.href = tempMap.href;
// 設置熱區對應事件
area.onclick = tempMap.onclick;
// 設置熱區id
area.id = tempMap.id;
// 向MAP中追加熱區對象
map.appendChild(area);
}
// 創建圖片對象
var img = document.createElement_x("img");
// 圖片ID
img.id = hotObj.img.id;
// 設置圖片鏈接
img.src = hotObj.img.imgName;
// 設置圖片對應熱區MAP
img.useMap="#" + mapName1;
// 設置圖片尺寸
img.width = hotObj.img.width;
img.height = hotObj.img.height;
// 邊框
img.border = "0";
// 設置圖片ID
img.id = hotObj.id;
// 清空指定DIV內容
document.getElementByIdx_x(divnId).innerHTML = '';
// 向DIV區添加MAP對象
document.getElementByIdx_x(divnId).appendChild(map);
// 向DIV區添加圖片對象
document.getElementByIdx_x(divnId).appendChild(img);
}
testClick = function() {
alert();
}
creatImgAndMap = function(){
var tempArray = new Array();
var tempObj = new Object();
// 圖片ID
tempObj.img = new Object();
tempObj.img.id = "test1";
// 圖片名稱（只要圖片名稱，路徑由公共變數設置）
tempObj.img.imgName = "113.jpg";
// 設置圖片尺寸
tempObj.img.width = "640";
tempObj.img.height = "200";
var tempMap;
tempObj.map = new Array();
// 熱點1
tempMap = new Object();
// 熱區ID
tempMap.id = "test1_hot1"
// 類型
tempMap.shape = "rect";
// 熱區坐標
tempMap.coords = "159,167,238,191";
// 鏈接
tempMap.href = "#";
// 單擊事件
tempMap.onclick = testClick;
// 添加到列表中
tempObj.map[0] = tempMap;
// 熱點2
tempMap = new Object();
// 熱區ID
tempMap.id = "test1_hot2"
// 類型
tempMap.shape = "rect";
// 熱區坐標
tempMap.coords = "147,7,286,33";
// 鏈接
tempMap.href = "#";
// 單擊事件
tempMap.onclick = testClick;
// 添加到列表中
tempObj.map[1] = tempMap;
// 將圖片及相應熱區信息添加到列表中
tempArray[0] = tempObj;
return tempArray;
};
// 熱點映射
var imgMapList = creatImgAndMap();
HTML代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.hounwang.com/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://hounwang.com/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<script type="text/javascript" src="img.js" ></script>
<script type="text/javascript">
function abc(){
main("aa");
}
</script>
</head>
<body>
<div id="mask">
<input type="button" value="set" onClick="abc()">
</div>
</body>
</html>