javascript熱區(qū),html熱區(qū)
js圖片上怎么設(shè)置熱區(qū)
//?MAP1名稱(chēng)
創(chuàng)新互聯(lián)專(zhuān)注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于做網(wǎng)站、網(wǎng)站設(shè)計(jì)、海倫網(wǎng)絡(luò)推廣、小程序制作、海倫網(wǎng)絡(luò)營(yíng)銷(xiāo)、海倫企業(yè)策劃、海倫品牌公關(guān)、搜索引擎seo、人物專(zhuān)訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供海倫建站搭建服務(wù)，24小時(shí)服務(wù)熱線：18980820575，官方網(wǎng)址：www.cdcxhl.com
var?mapName1?=?"Map1";
//?MAP1ID
var?mapId1?=?"MapId1";
//?指定DIV名稱(chēng)
var?divnId?=?"mask";
//?圖片路徑
var?imgPath?=?"";
main?=?function(type)?{
var?obj;
switch(type)?{
case?"aa"?:
//?指定圖片及熱點(diǎn)對(duì)象取得
obj?=?imgMapList[0];
//?創(chuàng)建圖片及熱點(diǎn)
creatImpAndHot(obj);
break;
}
}
creatImpAndHot?=?function(hotObj)?{
//?創(chuàng)建熱點(diǎn)MAP對(duì)象
var?map?=?document.createElement_x("Map");
//?設(shè)置MAP名稱(chēng)
map.name?=?mapName1;
//?設(shè)置MAPID
map.id?=?mapId1;
//?熱點(diǎn)列表取得
var?length?=?hotObj.map.length;
for?(var?i?=?0;?i??length;?i++)?{
var?tempMap?=?hotObj.map[i];
//?創(chuàng)建熱區(qū)對(duì)象
area?=?document.createElement_x("area");
//?設(shè)置熱區(qū)類(lèi)型
area.shape?=?tempMap.shape;
//?設(shè)置熱區(qū)坐標(biāo)
area.coords?=?tempMap.coords;
//?設(shè)置熱區(qū)對(duì)應(yīng)鏈接
area.href?=?tempMap.href;
//?設(shè)置熱區(qū)對(duì)應(yīng)事件
area.onclick?=?tempMap.onclick;
//?設(shè)置熱區(qū)id
area.id?=??tempMap.id;
//?向MAP中追加熱區(qū)對(duì)象
map.appendChild(area);
}
//?創(chuàng)建圖片對(duì)象
var?img?=?document.createElement_x("img");
//?圖片ID
img.id?=?hotObj.img.id;
//?設(shè)置圖片鏈接
img.src?=?hotObj.img.imgName;?
//?設(shè)置圖片對(duì)應(yīng)熱區(qū)MAP
img.useMap="#"?+?mapName1;
//?設(shè)置圖片尺寸
img.width?=?hotObj.img.width;?
img.height?=?hotObj.img.height;?
//?邊框
img.border?=?"0";
//?設(shè)置圖片ID
img.id?=?hotObj.id;
//?清空指定DIV內(nèi)容
document.getElementByIdx_x(divnId).innerHTML?=?'';
//?向DIV區(qū)添加MAP對(duì)象
document.getElementByIdx_x(divnId).appendChild(map);
//?向DIV區(qū)添加圖片對(duì)象
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";
//?圖片名稱(chēng)（只要圖片名稱(chēng)，路徑由公共變量設(shè)置）
tempObj.img.imgName?=?"113.jpg";
//?設(shè)置圖片尺寸
tempObj.img.width?=?"640";
tempObj.img.height?=?"200";
var?tempMap;
tempObj.map?=?new?Array();
//?熱點(diǎn)1
tempMap?=?new?Object();
//?熱區(qū)ID
tempMap.id?=?"test1_hot1"
//?類(lèi)型
tempMap.shape?=?"rect";
//?熱區(qū)坐標(biāo)
tempMap.coords?=?"159,167,238,191";
//?鏈接
tempMap.href?=?"#";
//?單擊事件
tempMap.onclick?=?testClick;
//?添加到列表中
tempObj.map[0]?=?tempMap;
//?熱點(diǎn)2
tempMap?=?new?Object();
//?熱區(qū)ID
tempMap.id?=?"test1_hot2"
//?類(lèi)型
tempMap.shape?=?"rect";
//?熱區(qū)坐標(biāo)
tempMap.coords?=?"147,7,286,33";
//?鏈接
tempMap.href?=?"#";
//?單擊事件
tempMap.onclick?=?testClick;
//?添加到列表中
tempObj.map[1]?=?tempMap;
//?將圖片及相應(yīng)熱區(qū)信息添加到列表中
tempArray[0]?=?tempObj;
return?tempArray;
};
//?熱點(diǎn)映射
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無(wú)標(biāo)題文檔/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
javascript 插入圓形圖片(或畫(huà)實(shí)心圓)
div class="box"img src="" //div
.box{width:200px;height:200px;border-radius:50%;overflow:hidden;}
試試這個(gè)結(jié)構(gòu)和對(duì)應(yīng)的css，這個(gè)應(yīng)該是可以解決的。
js中網(wǎng)頁(yè)前進(jìn)和后退的代碼
前進(jìn): history.forward();=history.go(1);
后退: history.back();=history.go(-1);
但是如果加在熱區(qū)中
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"這個(gè)屬性，就會(huì)打開(kāi)一個(gè)新的窗口，所以前進(jìn)和后退沒(méi)有起作用，所以需要?jiǎng)h掉這個(gè)屬性。
拓展資料
Javascript是一種由Netscape的LiveScript發(fā)展而來(lái)的原型化繼承的面向?qū)ο蟮膭?dòng)態(tài)類(lèi)型的區(qū)分大小寫(xiě)的客戶端腳本語(yǔ)言，于是Netscape的瀏覽器Navigator加入了Javascript，提供了數(shù)據(jù)驗(yàn)證的基本功能，主要目的是為了解決服務(wù)器端語(yǔ)言，比如Perl，遺留的速度問(wèn)題，為客戶提供更流暢的瀏覽效果。當(dāng)時(shí)服務(wù)端需要對(duì)數(shù)據(jù)進(jìn)行驗(yàn)證，由于網(wǎng)絡(luò)速度相當(dāng)緩慢，只有28.8kbps，驗(yàn)證步驟浪費(fèi)的時(shí)間太多。
js！div1層被div2層遮住了一半！div1里有張圖片有onclick事件！如何讓這個(gè)圖片的點(diǎn)擊事件起作用？
你可以在圖片2左下角上面加一個(gè)熱區(qū)，在那個(gè)熱區(qū)里也加個(gè)onclick事件就可以了。
圖片2這么寫(xiě)
img src="" border="0" usemap="#Map3" /
map name="Map3" id="Map"area shape="rect" target="_blank" coords="具體坐標(biāo)自己寫(xiě)" href="JavaScript:你的click方法" /
/map
網(wǎng)站題目：javascript熱區(qū),html熱區(qū)
分享鏈接：http://www.jiaotiyi.com/article/dsejcic.html