网页代码中鼠标移到图片某个区域自动弹出另一张小图的代码怎么编辑？ 在网页设计中怎样编写代码实现当鼠标移动到一张小图片上,变成大...
\u5927\u795e\uff0cHTML\u7f51\u9875\u7f16\u7a0b\u7684\u9f20\u6807\u653e\u5230\u56fe\u7247\u4e0a\uff0c\u6709\u53e6\u4e00\u4e2a\u56fe\u7247\u51fa\u6765\uff0c\u4ee3\u7801\u662f\u591a\u5c11\u5927\u4f53\u601d\u8def:
'\u5b9a\u4e49\u4e00\u4e2a\u653e\u5927\u56fe\u5c42
'\u5b9e\u9645\u663e\u793a\u56fe\u90e8\u5206
'\u9f20\u6807\u7ecf\u8fc7\u65f6\u89e6\u53d1\u7684\u4e8b\u4ef6\u5904\u7406
showbigpic(id)
{
var infoDiv = document.getElementById('otherlayer');
if(idx==1){
document.getElementsByName("'enlargedpic'")[0].src = pic;
infoDiv.style.visibility = "visible";
} else{
infoDiv.style.visibility = "hidden";
}
}
\u7528js\u5427\uff0c\u61d2\u4eba\u56fe\u5e93\u4e0a\u6709\u5f88\u591a\u8fd9\u7c7b\u7684
使用纯CSS即可实现全部效果，代码也很简单。
原理：hover触发CSS临近选择器
所需工具：DW（用来给图片画热区），PS（算出弹出层的top和left偏移值）
我在Demo里画了三个热区（位置如下图），你用鼠标悬停到上面即可看到效果。
源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片热区hover效果</title>
<style>
.main-wrap {position: relative; width: 884px; height: 600px; margin: 0 auto;} /* 宽度与高度必须与背景大图一致 */
.bigImg {position: absolute; display: none; border: 1px solid #ccc;}
.img1 {top: 199px; left: 153px;}
.img2 {top: 369px; left: 552px;}
.img3 {top: 411px; left: 632px;}
.hotspot:hover + .bigImg {display: block;}
</style>
</head>
<body>
<div class="main-wrap">
<img src="bg.jpg" usemap="#Map">
<map name="Map">
<area class="hotspot" shape="rect" coords="152,117,232,190" href="#">
<img class="bigImg img1" src="cpu.png">
<area class="hotspot" shape="rect" coords="553,313,605,355" href="#">
<img class="bigImg img2" src="drive.png">
<area class="hotspot" shape="rect" coords="635,353,695,397" href="#">
<img class="bigImg img3" src="printer.png">
</map>
</div>
</body>
</html>
使用纯css即可实现全部效果，代码也很简单。
原理：hover触发css临近选择器
所需工具：dw（用来给图片画热区），ps（算出弹出层的top和left偏移值）
我在Demo里画了三个热区（位置如下图），你用鼠标悬停到上面即可看到效果。
我觉光css就完全可以写了
需要JavaScript的配合。。。
为什么在IE浏览器里不好使？其他的浏览器都没问题
绛旓細1.棣栧厛锛屾墦寮html缂栬緫鍣紝鍒涘缓涓涓柊鐨刪tml鏂囦欢锛屽index.html锛屽～鍐欓棶棰樼殑鍩烘湰浠ｇ爜銆2銆佸湪index.html涓殑img>鏍囩锛岃緭鍏tml浠ｇ爜锛歴tyle=margin:15px20px25px30px;銆2.鍦╥ndex.html鏍囩锛屽苟杈撳叆html浠ｇ爜:style="杈硅窛:15px20px25px30px"銆3.娴忚鍣ㄨ繍琛宨ndex.html椤甸潰銆傛鏃讹紝鍥剧墖宸茬粡鎴愬姛...
绛旓細}.img1 {top: 199px; left: 153px;}.img2 {top: 369px; left: 552px;}.img3 {top: 411px; left: 632px;}.hotspot:hover + .bigImg {display: block;}
绛旓細 var speed=30 //杩欎釜鏄熷害鍊艰秺澶ч熷害瓒婃參 butong_net_top2.innerHTML=butong_net_top1.innerHTML //鍏嬮殕butong_net_top1涓篵utong_net_top2 function Marquee1(){ //褰撴粴鍔ㄨ嚦butong_net_top1涓巄utong_net_top2浜ょ晫鏃 if(butong_net_top2.offsetTop-butong_net_top.scrol...
绛旓細js鐨勯紶鏍囦簨浠讹紝浣榧犳爣绉诲姩鍒灏鍥涓婇潰鏃讹紝瀵瑰簲鐨勫ぇ鍥炬樉绀猴紝鍏朵粬鐨勫ぇ鍥綿isplay:none
绛旓細img涔熸槸鍙互鍋氫吉绫诲睘鎬х殑锛屽img锛歨over銆傝嚦浜庝綘璇寸殑榧犳爣鏀句笂鍘讳箣鍚庡叏閮ㄩ兘鏈夎竟妗嗭紝杩欎釜浣犳妸浠ｇ爜鏅掑嚭鏉ョ湅鐪嬫墠鐭ラ亾銆傚垵姝ュ垽鏂璦鏍囩鍔犻敊浜嗐
绛旓細缁鍥剧墖璁剧疆涓や釜灞炴 onmouseover="document1()" onmouseout="document2()" 鍒嗗埆瑙﹀彂涓や釜鍑芥暟 function document1(){ v1=document.getElementById("dd");v1.style.height="400";v1.style.width="600";} function document2(){ v1=document.getElementById("dd");v1.style.height="200";v...
绛旓細鍙互缁鍥剧墖娣诲姞鐑偣,鐒跺悗鍒囨崲鍒浠ｇ爜瑙嗗浘,鍦ㄦ爣绛惧綋涓殑杩欎釜: 杩欒〃绀轰竴涓儹鐐,鍦ㄨ繖閲屾坊鍔犱竴涓猘lt灞炴у氨鍙互浜
绛旓細鐢╦s姣旇緝绠鍗曘傞鍏堣鎶婇渶瑕佺殑鍥剧墖閮戒簨鍏堟斁鍦缃戦〉涓婏紙涓鑸斁鍦ㄤ竴涓猟iv閲岋級銆傜劧鍚庣敤css闅愯棌绗竴涓互澶栫殑鍥剧墖锛岀劧鍚庣粰绗竴寮犲浘鐗囪缃竴涓紶鏍囩Щ鍏ヤ簨浠讹紝褰榧犳爣绉诲姩鍒板浘鐗涓婄殑鏃跺欙紝绗竴寮犲浘鐗囬殣钘忥紝绗簩寮犲浘鐗囨樉绀恒傝繖鏍峰浘鐗囧氨鏀瑰彉浜嗐傚彟澶栬繕鍙互鍔犲叆涓涓紶鏍囩Щ鍑轰簨浠讹紝璁╅紶鏍囩Щ鍑哄悗2涓浘鐗囩殑鏍峰紡鎭㈠鏈...
绛旓細鍏跺疄妤间富澶у彲浠ヤ笉鐢ㄦ坊鍔犻忔槑褰㈠紡鐨勪笢瑗裤傚鏋滄ゼ涓绘槸浣跨敤img鏍囩鍙鍦–SS閫夋嫨鐨勬椂鍊欏湪class閫夋嫨鐨勫悗闈㈠姞涓婁簨浠堕夋嫨鍣":hover"骞朵负璇ユ牱寮忔坊鍔"border:1px solid #000;"鍗冲彲 閭ｄ箞浼撮殢鐫border鐨勫帤搴︼紝鍙兘浼氫娇璇ユā鍨嬩綅缃骇鐢熷亸绉 鍙渶鍐嶆坊鍔"margin:-1 0 0 -1;"鍗冲彲銆傚笇鏈涘緱鍒版ゼ涓荤殑閫変腑锛屽鏈夊叾浠栭棶棰...
绛旓細浣跨敤浼被 :hover 婕旂ず浠ｇ爜涓猴細 http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 鏃犳爣棰樻枃妗 浣犲ソ 鏂板缓涓涓┖鐧絫xt鏂囨。锛岀劧鍚庡皢浠ヤ笂浠ｇ爜澶嶅埗绮樿创杩涘幓锛岀劧鍚庝慨鏀瑰悗缂鍚嶄负html锛 鐒跺悗鍙屽嚮html锛屽嵆鍙煡鐪嬫晥鏋滐紱鎴戞槸鐢ㄦ敼鍙樿儗鏅鑹叉潵婕旂ず锛屼綘濡傛灉闇瑕鍥剧墖...
