dreamweaver里一张图片怎么做鼠标经过出现大图? 怎样在Dreamweaver里实现鼠标点击一张张小图在指定地...
DreamWeaver\u9f20\u6807\u7ecf\u8fc7\u56fe\u50cf \u5982\u679c\u4e00\u5f20\u56fe\u4e0a\u6709\u591a\u4e2a\u9700\u8981\u53d8\u6362\u7684\u56fe\u600e\u4e48\u505aDreamWeaver\u9f20\u6807\u7ecf\u8fc7\u56fe\u50cf\u7684\u529f\u80fd\u4e00\u6b21\u53ea\u80fd\u505a\u4e00\u5f20\u56fe\u7247\u53d8\u6362\u6210\u53e6\u4e00\u5f20\u56fe\u7247\u7684\u6548\u679c\u3002
\u7f51\u9875\u4e0a\u51fa\u73b0\u7684\u4e00\u4e2a\u5b8c\u6574\u7684\u5927\u56fe\u70b9\u51fb\u5c40\u90e8\u53ef\u53d8\u6362\u7ffb\u8f6c\u7684\u6548\u679c----\u8fd9\u4e2a\u5927\u56fe\u7247\u5f80\u5f80\u4e5f\u662f\u7ecf\u8fc7\u62fc\u5207\u7ec4\u5408\u800c\u6210\u7684\uff0c\u5728\u4ee3\u7801\u5185\u90e8\u5e76\u975e\u5f15\u7528\u7684\u662f\u4e00\u5f20\u56fe\u7247\u3002\u5982\u679c\u8981\u4f7f\u7528DreamWeaver\u9f20\u6807\u7ecf\u8fc7\u56fe\u50cf\u529f\u80fd\u5236\u4f5c\u7c7b\u4f3c\u6548\u679c\uff0c\u4e5f\u53ef\u4ee5\u5207\u5272\u5927\u56fe\u540e\u518d\u5229\u7528\u8868\u683c\u6216div\u7ec4\u5408\u56fe\u7247\uff0c\u5728\u6bcf\u4e00\u4e2a\u5207\u5272\u7684\u5c0f\u56fe\u4e0a\u6dfb\u52a0\u6548\u679c\u3002
\u5f53\u7136\u6700\u597d\u7684\u529e\u6cd5\u662f\u624b\u5199js\u4ee3\u7801\uff0c\u80fd\u591f\u4ea7\u751f\u66f4\u597d\u7684\u52a8\u753b\u8fc7\u6e21\u7684\u6548\u679c\u3002
\u6ca1\u73a9\u8fc7DW\uff0c\u5927\u6982\u60f3\u4e86\u4e0b\uff0c\u5e94\u8be5\u53ef\u4ee5\u7528\u4e0b\u5217\u65b9\u6cd5\u505a
\u65b9\u6cd5\u4e00\uff1a
\u5982\u679c\u9f20\u6807\u4e8b\u4ef6\u54cd\u5e94\u533a\u57df\u53ef\u4ee5\u4e0d\u4e0e\u4e0a\u9762\u7684\u56fe\u7247\u91cd\u53e0
\u5219\u53ef\u4ee5\u5c06\u533a\u57df\u653e\u5728\u4e0b\u9762\u7684\u56fe\u7247\u4e0a\uff0c\u7136\u540e\u533a\u57df\u54cd\u5e94\u9f20\u6807\u70b9\u51fb\uff0c\u70b9\u51fb\u540e\uff0c\u66f4\u6362\u4e0a\u65b9\u56fe\u7247\u3002
\u65b9\u6cd5\u4e8c\uff1a
\u8fd9\u4e2a\u6bd4\u8f83\u901a\u7528
\u5728\u540e\u53f0\u8bbe\u7f6e\u5168\u5c40\u53d8\u91cfA\uff0c\u4e0a\u65b9\u56fe\u7247\u6839\u636e\u5168\u5c40\u53d8\u91cfA\u7684\u503c\u663e\u793a\u4e0d\u540c\u56fe\u7247\u3002
\u4e0b\u65b9\u56fe\u7247\u54cd\u5e94\u9f20\u6807\u70b9\u51fb\u4e8b\u4ef6\uff0c\u5728\u4e8b\u4ef6\u4e2d\u5c06\u5168\u5c40\u53d8\u91cfA\u7684\u503c\u8fdb\u884c\u6539\u53d8\uff0c\u5e76\u8c03\u7528\u4e0a\u65b9\u56fe\u7247\u533a\u57df\u91cd\u7ed8\u3002
\u5e0c\u671b\u4e0a\u8ff0\u601d\u8def\u80fd\u591f\u5e2e\u5230LZ\u3002
1.新建html文档。
2.在head里插入链接和图片样式，表示鼠标经过时图片放大，代码如下：
<style type="text/css">
a #big{width:800px;height:480px}
a #big:hover {width:1200px;height:720px}
</style>
3.在body里插入<a href="#"><img id="big" src="images/done.jpg" /></a>，表示设置一个有链接的图片，引用图片放大样式。
4.在IE里测试。鼠标离开时图片正常，鼠标经过时图片放大。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>鼠标经过图片变大</title>
<script type="text/JavaScript">
function hidetrail(){
document.getElementById("preview_div").style.display= "none";
}
function showtrail(img1){
document.getElementById("preview_div").innerHTML="<img src="+img1+" width=400 height=300>";
document.getElementById("preview_div").style.display= "block";
}
function document.onmousemove(){
var a = document.body.scrollTop;
var b = document.body.scrollLeft;
var x = window.event.x;
var y = window.event.y;
document.getElementById("preview_div").style.top=a+y-150;
document.getElementById("preview_div").style.left=b+x;
}
</script>
</head>
<body>
<DIV id=preview_div style="DISPLAY: none; Z-INDEX: 50; POSITION: absolute;border:1 gray solid;filter: progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=135,strength=3);"></DIV>
<img src=‘shangchuanFiles/2010821175127176.jpg' border=0 width=120 height=90 align=left onMouseOver="showtrail('/shangchuanFiles/2010821175127176.jpg')" onmouseout=hidetrail()></a>
</body>
</html>
绛旓細1.鏂板缓html鏂囨。銆2.鍦╤ead閲屾彃鍏ラ摼鎺ュ拰鍥剧墖鏍峰紡锛岃〃绀洪紶鏍囩粡杩囨椂鍥剧墖鏀惧ぇ锛屼唬鐮佸涓嬶細 a #big{width:800px;height:480px} a #big:hover {width:1200px;height:720px} 3.鍦╞ody閲屾彃鍏ワ紝琛ㄧず璁剧疆涓涓湁閾炬帴鐨勫浘鐗囷紝寮曠敤鍥剧墖鏀惧ぇ鏍峰紡銆4.鍦↖E閲屾祴璇曘傞紶鏍囩寮鏃跺浘鐗囨甯革紝榧犳爣缁忚繃鏃跺浘鐗囨斁澶с
绛旓細1銆佺偣鍑烩滄彃鍏モ濅腑鐨勨滃浘鍍忊濋夐」銆傛墦寮鈥滈夋嫨鍥惧儚鈥濇枃浠讹紝鎵惧埌瑕佹彃鍏ョ殑鍥剧墖锛岀偣鍑烩滅‘瀹氣濇寜閽銆傚湪寮瑰嚭瀵硅瘽妗嗕腑鐐瑰嚮鈥滄槸鈥濄傝繖鏃舵垜浠氨鍙互灏嗗浘鐗囧鍒剁殑缃戠珯绔欑偣鐩綍涓嬶紝涓鑸儏鍐典笅锛屽浘鐗囨枃浠朵笓闂ㄤ細鏈変竴涓瓨鏀炬枃浠跺す锛屾垜浠彲浠ョ偣鍑绘柊寤烘寜閽紝鍒涘缓涓涓浘鐗囨枃浠跺す銆傛墦寮鍥剧墖鏂囦欢澶癸紝杩欐椂鎴戜滑灏卞彲浠ュ皢鍥剧墖澶嶅埗...
绛旓細鍏蜂綋鎿嶄綔姝ラ濡備笅锛1銆侀鍏堬紝鍦ㄨ绠楁満C鐩樹笅鍒涘缓涓涓渕yweb2鈥濇枃浠跺す锛屻2銆佺劧鍚庢墦寮Dreamweaver杞欢锛屻3銆佹柊寤轰竴涓珯鐐癸紝鍛藉悕涓衡渕yweb2鈥濓紝璺熷垱寤哄湪C鐩橀噷鐨勨渕yweb2鈥濅竴鏍凤紝銆4銆佸厛鍦ㄧ綉涓婁笅杞涓寮犲浘鐗锛屽啀淇濆瓨鍒癈鐩樹笅鐨刴yweb2锛屻5銆佺劧鍚庡鍏ユ柊寤虹殑HTML涓紝銆6銆佸湪鍥剧墖涓嬭緭鍏ヤ竴浜涘悕瀛楋紝銆
绛旓細鎶婃斁涓嬮潰鐨勫浘鐗囩敤锛堣儗鏅級鎻掑叆锛屼笂闈㈢殑涓寮犳彃鍏ュ浘鍍 灏卞彲浠ヤ簡銆傜煡璇嗙偣寤朵几锛 濡傛灉鏄鎶涓寮犲浘鐗鏀惧湪鏌愬锛堢綉椤电殑涓婇潰锛夐偅璇磋鐢ㄥ埌灞備簡銆
绛旓細 鐢ㄨ繖鍙ヤ唬鐮佸氨琛屼簡
绛旓細1:鏈绠鍗曠殑鏂规硶灏辨槸鍦≒S閲屼慨鏀硅儗鏅鍥剧墖,鎶婂畠鏀惧ぇ鍒颁綘鎯宠鐨勫昂瀵 2:鍋氭垚flash 3:鐢ㄦ潵瀹炵幇,涓や釜閲嶅彔鐨勫眰.涓嬮潰涓灞傛斁浣犵殑鑳屾櫙鍥,浣嗕笉鏄綔涓鸿儗鏅,鑰屾槸鎻掑叆鍥剧墖,鍦ㄥ叾涓婇潰鍐嶆斁涓涓眰,,,鎼佸唴瀹 杩欐槸璁╁浘鐗囧彧鍑虹幇涓娆,涓嶉噸澶 浣犵殑闂搴旇鏄敤涓婇潰杩欎釜鏂规硶鏉ヨВ鍐 杩欐槸璁╁浘鐗囨í鍚戦噸澶 杩...
绛旓細1銆侀鍏堝湪鐢佃剳涓鎵撳紑DW锛岃緭鍏モ渋mg鈥濇寜鈥渢ab鈥濋敭锛屽涓嬪浘鎵绀恒2銆佺劧鍚庡湪鍥剧墖浣嶇疆鎸夌┖鏍硷紝閫夋嫨鈥滄祻瑙堚濓紝濡備笅鍥炬墍绀恒3銆佹帴鐫鍦ㄥ脊鍑虹獥鍙ｄ腑锛屾壘鍒拌鎻掑叆鍒癉W杞欢涓殑鍥剧墖鏂囦欢锛屽涓嬪浘鎵绀恒4銆佹渶鍚庣偣鍑荤‘瀹氾紝绋嶇瓑涓涓嬶紝鍗冲彲鍔犺浇鍑哄浘鐗囷紝濡備笅鍥炬墍绀哄氨瀹屾垚浜嗐
绛旓細鍦ㄨ彍鍗曢偅閲屾壘鍒版彃鍏-鍥惧儚瀵硅薄-榧犳爣缁忚繃鍥惧儚 寰堢畝鍗曠殑銆傜劧鍚庝綘鐪嬬潃璁剧疆灏卞彲浠ヤ簡銆
绛旓細浣犲厛鎶婅繖涓鍥剧墖鍒犻櫎锛岀劧鍚庡湪杩欎釜缃戞牸閲岃缃寳浜负鍒氭墠鐨勯偅涓浘鐗囷紝鐒跺悗鎮ㄥ氨鍙互鍦ㄤ笂闈㈢紪杈戞枃瀛椾簡銆傛贰鐒朵綘涔熷彲浠ュ湪鍥剧墖涓婃彃鍏ヤ竴涓眰锛岀劧鍚庡湪閲岄潰缂栬緫鏂囧瓧锛屼絾鍚庝竴绉嶆柟娉曠殑鏂囧瓧锛屽湪涓嶅悓鍒嗚鲸鐜囦笅浼氬嚭鐜板亸宸
绛旓細Dreamweaver閲鏈夌儹鐐瑰姛鑳斤紝浣犲彲浠ョ敾鍑虹儹鍖猴紝鐒跺悗璁剧疆閾炬帴
