本文目錄一覽：
- 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/zh-tw/n/128440.html
微信掃一掃 
支付寶掃一掃 
