javascript热点,html热点

js图片上怎么设置热区

// 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();

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""

html xmlns=""

 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

相关问答

Q1: three.js里面可以添加热点吗？

假设dae_scene从ColladaLoader一个COLLADA现场回来，这里是你可以做什么检查交集：var toIntersect = [];

THREE.SceneUtils.traverseHierarchy(dae_scene, function (child) {

if (child instanceof THREE.Mesh) {

toIntersect.push(child);

}

});

这得到了COLLADA场景内的所有网格对象。您可以在数组中寻找射线相交，像这样：var ray = new THREE.Ray( camera.position,

vector.subSelf( camera.position ).normalize() );

var intersects = ray.intersectObjects( toIntersect );

是这样一个思路。。

Q2: 怎么样用js在页面创建热点？

将上传的版面图显示在一个编辑页面中，当鼠标在图片上相应区域点击后拖动，就会拉出一个相应的层来（类似于在dw中画图片热点）。鼠标释放后，弹出对话框，输入目标文章网址。而层的位置数据用js获取后存入数据库，作为图片热点区域的坐标。这样依次画出多个热点区域来。

Q3: javascript是什么东西啊，干什么用的，上网能用到吗

JavaScript语言的前身叫作Livescript。自从Sun公司推出著名的Java语言之后，Netscape公司引进了Sun公司有关Java的程序概念，将自己原有的Livescript 重新进行设计，并改名为JavaScript。

JavaScript是一种基于对象和事件驱动并具有安全性能的脚本语言，有了JavaScript，可使网页变得生动。使用它的目的是与HTML超文本标识语言、Java 脚本语言一起实现在一个网页中链接多个对象，与网络客户交互作用，从而可以开发客户端的应用程序。它是通过嵌入或调入在标准的HTML语言中实现的。

JavaScript具有很多优点：

1.简单性 JavaScript是一种脚本编写语言，它采用小程序段的方式实现编程，像其它脚本语言一样，JavaScript同样已是一种解释性语言，它提供了一个简易的开发过程。它的基本结构形式与C、C++、VB、Delphi十分类似。但它不像这些语言一样，需要先编译，而是在程序运行过程中被逐行地解释。它与HTML标识结合在一起，从而方便用户的使用操作。

2.动态性 JavaScript是动态的，它可以直接对用户或客户输入做出响应，无须经过Web服务程序。它对用户的反映响应，是采用以事件驱动的方式进行的。所谓事件驱动，就是指在主页中执行了某种操作所产生的动作，就称为“事件”。比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后，可能会引起相应的事件响应。

3.跨平台性 JavaScript是依赖于浏览器本身，与操作环境无关，只要能运行浏览器的计算机，并支持JavaScript的浏览器就可以正确执行。

4.节省CGI的交互时间 随着WWW的迅速发展有许WWW服务器提供的服务要与浏览者进行交流，确浏览的身份、需服务的内等等，这项工作通常由CGI/PERL编写相应的接口程序与用户进行交互来完成。很显然，通过网络与用户的交互过程一方面增大了网络的通信量，另一方面影响了服务器的服务性能。服务器为一个用户运行一个CGI时，需要一个进程为它服务，它要占用服务器的资源(如CPU服务、内存耗费等)，如果用户填表出现错误，交互服务占用的时间就会相应增加。被访问的热点主机与用户交互越多，服务器的性能影响就越大。

JavaScript是一种基于客户端浏览器的语言，用户在浏览中填表、验证的交互过程只是通过浏览器对调入HTML文档中的JavaScript源代码进行解释执行来完成的，即使是必须调用CGI的部分，浏览器只将用户输入验证后的信息提交给远程的服务器，大大减少了服务器的开销。

参考资料：

Q4: 点击热点区域弹出相应的对话框用js怎么实现

把相关信息都附到热点上，用自定义属性data-xx,点击的时候获取这些属性，创建个div，定位正确位置，并显示出来。