本文目录一览：
- 1、如何用JS语句显示图片？
- 2、如何用JS实现简单的图片替换
- 3、求js代码。在一张图片上实现两个功能
- 4、js图片上怎么设置热区
- 5、JS动态在图片上 绘制热区 并 记录坐标！ 哪位大神会啊
- 6、怎么样用js在页面创建热点？
如何用JS语句显示图片？
需要准备的材料分别有：电脑、html编辑器、浏览器。
1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的script标签，输入js代码：$(‘body’).append(‘img src=”” /’);。
3、浏览器运行index.html页面，此时图片被js成功显示到页面上。
如何用JS实现简单的图片替换
需要准备的材料分别有：电脑、html编辑器、浏览器。
1、首先，打开html编辑器，新建html文件，例如：index.html，填写问题基础代码。
2、在index.html中的script标签，输入js代码：$(‘img’).attr(‘src’, ”);。
3、浏览器运行index.html页面，此时网页上的所有图片都被替换成了指定的图片。
求js代码。在一张图片上实现两个功能
用图片热点分别加连接，或者 返回顶部”和“收藏本站”做成做成两个图片，分别加连接
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
JS动态在图片上 绘制热区 并 记录坐标！ 哪位大神会啊
根据图片设置希望的热区坐标。代码如下：
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();
HTML代码：
!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
怎么样用js在页面创建热点？
将上传的版面图显示在一个编辑页面中，当鼠标在图片上相应区域点击后拖动，就会拉出一个相应的层来（类似于在dw中画图片热点）。鼠标释放后，弹出对话框，输入目标文章网址。而层的位置数据用js获取后存入数据库，作为图片热点区域的坐标。这样依次画出多个热点区域来。
原创文章，作者：简单一点，如若转载，请注明出处：https://www.506064.com/n/128440.html
微信扫一扫 
支付宝扫一扫 