您的位置:

js图片热点编辑器代码(js图片热点编辑器代码大全)

js图片热点编辑器代码(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获取后存入数据库,作为图片热点区域的坐标。这样依次画出多个热点区域来。

js图片热点编辑器代码(js图片热点编辑器代码大全)

本文目录一览: 1、如何用JS语句显示图片? 2、如何用JS实现简单的图片替换 3、求js代码。在一张图片上实现两个功能 4、js图片上怎么设置热区 5、JS动态在图片上 绘制热区 并 记录坐标! 哪

2023-12-08
js优秀代码图片,js好玩的代码

本文目录一览: 1、js代码控制图片移动 2、图片自动切换的JS代码 3、JS 显示 上传 图片 ,,高手帮我解释一下这段代码 4、求一个图片自动切换的JS代码。 5、如何用JS实现简单的图片替换 6

2023-12-08
js图片转动代码(图片切换js特效代码)

本文目录一览: 1、javascript让图片移动的函数 2、JS控制图片向左向右移动的代码 3、js实现图片旋转效果 4、js 怎么实现点击一次图片旋转90度,再点击再转90度呢 5、JavaScr

2023-12-08
js代码热更(js热更新)

本文目录一览: 1、前端开发未来的发展前景怎么样? 2、如何实现iOS热更新 3、由于js循环过多导致使用app时手机发烫 咋么处理 4、java软件开发和web前端哪个就业前景好,工资高? 前端开发

2023-12-08
12款超酷图片展示js代码下载(炫酷代码图片)

本文目录一览: 1、跪求JS完整代码 点击图片,弹出这个图片,然后可以关闭弹出的窗口 图片文件或文字用(……)代替即可 2、求--超酷超绚精美图片展示效果代码(二) - 网页特效观止-网页特效代码|

2023-12-08
js弹出图片代码(js弹出图片代码怎么办)

本文目录一览: 1、用js脚本,怎么实现弹出选择图片的对话框,并将文件上传到服务器 2、javascript点击查看图片,弹框显示图片,怎么用js怎么实现? 3、js如何实现点击图片弹出窗口并放大这张

2023-12-08
原生js实现图片左右滚动代码(js图片循环滚动代码)

本文目录一览: 1、JS如何实现左右滚动轮播代码详细点 2、js实现图片左右滚动 3、js实现图片滚动效果 4、JS如何实现图片滑动? 5、js图片左右滚动 怎么弄 有没案例代码 求帮忙 JS如何实现

2023-12-08
在线js代码编辑器插件下载(JS在线编辑器)

本文目录一览: 1、JS 文本编辑器 2、有哪些好用的代码编辑器值得推荐? 3、有哪些好用的代码编辑器值得推荐 JS 文本编辑器 今天参加一个讲座的时候,讲师推荐了一个很好用的JSIDE。我下载试用了

2023-12-08
编辑js代码(写js用什么编辑器)

本文目录一览: 1、怎样编辑JS代码 2、打开浏览器控制台,修改js代码怎么操作 3、怎么编写和调用js文件 4、如何编写高效的js代码 5、js代码怎么写 怎样编辑JS代码 这个太多了。简单的举几个

2023-12-08
js实例图片,js 处理图片

本文目录一览: 1、js鼠标悬停显示文字实例 2、如何用JS语句显示图片? 3、js实现单击图片放大图片的方法 js鼠标悬停显示文字实例 一、首先需要div布局:!DOCTYPE htmlhtml l

2023-12-08
淘宝分类js代码(淘宝搜索代码)

本文目录一览: 1、这种淘宝宝贝分类的css代码怎么做, 2、淘宝联盟搜索推广JS代码怎么放到网站上 3、在淘宝充值平台上面看他们网页原本看到这段JS代码谁可以为我解释下... 4、求助JS代码怎么转

2023-12-08
Kindeditor编辑器:如何实现图片上传功能?

2023-05-16
js显示图片,js图片展示

2023-01-07
java热点方法(java热点代码)

2022-11-08
2017js代码大全(js新手代码大全)

本文目录一览: 1、关于JS的代码 2、下面是一段Js语言代码。我是初学者,大神,花括号里的各个代码如何理解? 3、JS鼠标事件大全 JS鼠标事件有哪些 4、什么地JS?什么是JSP? 5、JS 代码

2023-12-08
htmljs在线编译,html在线编辑器源代码

本文目录一览: 1、网页设计师非常有用的几个在线工具 2、JS调用如何被HTML编译 3、html转js 4、HTML和JS代码格式化原理是什么? 网页设计师非常有用的几个在线工具 时间戳转换功能简介

2023-12-08
js代码视频网站焦点图片切换(JS图片切换)

本文目录一览: 1、js写的焦点图片切换,怎么能让图片从数据库中动态获取路径进行显示。而不靠更改网页的代码进行增减图片? 2、js焦点图片切换 3、js焦点图切换图片的数字按钮代码怎么写?要有鼠标点击

2023-12-08
可重播的大屏图片js广告代码(可重播的大屏图片js广告代码大

本文目录一览: 1、修改js弹窗广告代码 2、急需要,求一段网页全屏广告的JS代码. 3、求一个网站首页全屏大图广告的代码!可以关闭的 4、JS广告代码 修改js弹窗广告代码 修改TOP的数值。doc

2023-12-08
js编写图片手动滚动的代码(js滚动图片怎么做)

本文目录一览: 1、怎么用JS脚本使多张图片滚动? 2、js实现图片滚动效果 3、求JS图片滚动代码 怎么用JS脚本使多张图片滚动? 推荐使用marquee实现图片滚动,示例:marqueescrol

2023-12-08
7栏js焦点图代码(js焦点图特效)

本文目录一览: 1、Jquery.SuperSlide扩展效果里的实用焦点图效果代码,求大神,谢谢 2、js焦点图代码怎么用啊? 3、什么是焦点图 4、js焦点图切换图片的数字按钮代码怎么写?要有鼠标

2023-12-08