JS动态在图片上绘制热区并记录坐标！哪位大神会啊_IT百科

根据图片设置希望的热区坐标。代码如下：

js代码：更多问题到问题求助专区http://bbs.houdunwang.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 = 0i <lengthi++) {

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.houdunwang.com/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

function abc(){

main("aa")

}

</script>

</head>

<body>

</div>

</body>

</html>

如果需要用原生js动态的加载另外一个js文件，可以使用原生js的document.createElement方法创建script节点，然后更改该节点的type和src属性,最后通过appendChild方法将该节点动态添加到html中，这样就可以了，参考代码如下：

var new_element = document.createElement("script")//创建新的script节点new_element.setAttribute("type", "text/javascript")new_element.setAttribute("src", "../js/jquery.js")document.body.appendChild(new_element)//添加到body节点的末尾

上例中是在body的最末尾添加的，当然同样可以在head中添加引用该js的标签：document.head.appendChild(new_element)

前进: history.forward()=history.go(1)

后退: history.back()=history.go(-1)

但是如果加在热区中

<<span class="start-tag">map name="Maps" id="Maps"> <<span class="start-tag">area shape="rect" coords="2,2,79,52" href="javascript:history.go(-1)" target="_blank"> <<span class="start-tag">area shape="rect" coords="77,2,166,52" href="#"> <<span class="starttag">area shape="rect" coords="166,4,242,51" href="#" target="_blank"> <<spanclass="starttag">area shape="rect" coords="248,5,318,53" href="javascript:history.go(1)"target="_blank"> </<span class="end-tag">map>

如果有target="_blank"这个属性，就会打开一个新的窗口，所以前进和后退没有起作用，所以需要删掉这个属性。

拓展资料

Javascript是一种由Netscape的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言，于是Netscape的浏览器Navigator加入了Javascript，提供了数据验证的基本功能，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。当时服务端需要对数据进行验证，由于网络速度相当缓慢，只有28.8kbps，验证步骤浪费的时间太多。

欢迎分享，转载请注明来源：内存溢出

原文地址:https://54852.com/bake/11719884.html

JS动态在图片上绘制热区并记录坐标！哪位大神会啊

发表评论

评论列表（0条）

JS动态在图片上 绘制热区 并 记录坐标！ 哪位大神会啊

发表评论

评论列表（0条）

JS动态在图片上绘制热区并记录坐标！哪位大神会啊