HTML代码移动鼠标到图片会变化是怎么做的？ 在html中怎么用js实现鼠标指向图片时图片放大的效果？（具...
HTML\u4ee3\u7801\u79fb\u52a8\u9f20\u6807\u5230\u56fe\u7247\u4f1a\u53d8\u5316\u662f\u600e\u4e48\u505a\u7684?\u7528hover\u4f2a\u7c7b\u6765\u505a
\u505a\u597d\u662f\u7ed9\u56fe\u7247\u52a0\u4ee5\u4e2a\u6807\u7b7e\uff0c\u7136\u540e\u5bf9\u6807\u7b7e\u8bbe\u7f6ehover
\u4f8b\u5982\u4e00\u4e2a\u56fe\u7247
\u79fb\u4e0a\u53bb\u7684\u56fe\u7247\u53ebhover.jpg \u4e24\u4e2a\u56fe\u7247\u5927\u5c0f\u4e00\u6837
\u6539\u5199\u6210
\u518d\u5728css\u4e2d\u6dfb\u52a0
#example{ background:url('example.jpg') no-repeat; display:block; width:100px; height:100px;}
#example:hover{ background:url('hover.jpg') no-repeat; }
\u5206\u522b\u5199\u4e00\u4e2aonmouseover\u548conmouseout\u4e8b\u4ef6\u3002\u7136\u540e\u5728\u4e8b\u4ef6\u91cc\u9762\u52a0\u4e00\u4e2afunction\uff0c\u5206\u522b\u5199\u60f3\u8981\u653e\u5927\u7684\u5c3a\u5bf8\u548c\u7f29\u5c0f\u6216\u590d\u539f\u7684\u5c3a\u5bf8\u3002
\u5177\u4f53\u4ee3\u7801\u5b9e\u73b0\u5982\u4e0b\uff1a
var img = document.getElementById('img');
function bigger(){ img.style.width = '400px'; img.style.height = '400px'; }
function smaller(){ img.style.width = '100px'; img.style.height = '100px'; }
\u6269\u5c55\u8d44\u6599\uff1a
HTML 4.0 \u7684\u65b0\u7279\u6027\u4e4b\u4e00\u662f\u6709\u80fd\u529b\u4f7f HTML \u4e8b\u4ef6\u89e6\u53d1\u6d4f\u89c8\u5668\u4e2d\u7684\u52a8\u4f5c\uff08action\uff09\uff0c\u6bd4\u5982\u5f53\u7528\u6237\u70b9\u51fb\u67d0\u4e2a HTML \u5143\u7d20\u65f6\u542f\u52a8\u4e00\u6bb5 JavaScript\u3002\u4e0b\u9762\u662f\u4e00\u4e2a\u5c5e\u6027\u5217\u8868\uff0c\u8fd9\u4e9b\u5c5e\u6027\u53ef\u63d2\u5165 HTML \u6807\u7b7e\u6765\u5b9a\u4e49\u4e8b\u4ef6\u52a8\u4f5c\u3002
\u53c2\u8003\u8d44\u6599\uff1a
JavaScript\u5b98\u65b9API\u63a5\u53e3-GlobalEventHandlers.onmouseover
JavaScript\u5b98\u65b9API\u63a5\u53e3-GlobalEventHandlers.onmouseout
W3cSchool-JavaScript \u4e8b\u4ef6\u53c2\u8003\u624b\u518c
做好是给图片加以个<a>标签，然后对<a>标签设置hover
例如一个图片<img src='example.jpg' width='100' height='100' alt='举例'>
移上去的图片叫hover.jpg 两个图片大小一样
改写成
<a href='javascript;:' id='example'><a>
再在css中添加
#example{ background:url('example.jpg') no-repeat; display:block; width:100px; height:100px;}
#example:hover{ background:url('hover.jpg') no-repeat; }
Dreamweaver 本身就有这样的代码，可以直接插入。
绛旓細杩欎釜瑕佺敤鍒癹avascript缂栫▼锛屽綋鎶榧犳爣鏀惧湪鍘鍥剧墖涓婃椂瑙﹀彂onmouseover浜嬩欢锛屼簨浠剁殑鍐呭灏辨槸鏄剧ず鏂板浘鐗囥
绛旓細鐩存帴娣诲姞涓涓猧mg:hover鍗冲彲锛屽湪杩欓噷闈㈡妸鍥剧墖閾炬帴鏀规帀灏辫浜嗭紝涓嶇敤JavaScript閮借銆
绛旓細涓嬭浇涓涓媕query鎻掍欢锛岀劧鍚庢柊寤轰竴涓猅oolTip.js鏂囦欢锛屽湪璇ユ枃浠朵笅鍐欏叆浠ヤ笅浠ｇ爜锛(function() { var x = 10;var y = 10;("a.tooltip").mouseover(function(e) { this.myTitle = this.title;this.title = "";var tooltip = "<div id='tooltip'><img src='" + this.href + "' alt='...
绛旓細js鐨勫涓婇潰2浣嶈В绛旓紝浣跨敤mouseover榧犳爣浜嬩欢锛屽锛<a href="#" onmouseover="this.style.background='url(/images/44.jpg) no-repeat center top;'" onmouseoutr="this.style.background='url(/images/44.jpg) no-repeat center top;'">棣栭〉<a/> 杩欎釜浠ｇ爜姣旇緝澶氱殑璇濓紝涔熷彲浠ヤ娇鐢ㄤ笉鍚岀殑css閫夋嫨...
绛旓細1銆佸噯澶囧垏鎹鍥剧墖绱犳潗锛屼竴鑸槸涓ゅ紶锛屽鍥撅紝鏀惧叆img鏂囦欢澶癸紝璺HTML鍚岀骇銆2銆佺劧鍚庣敤img宓屽叆鍒扮綉椤碉紝宓屽叆鍏朵腑鐨勪竴寮狅紝鍙﹀涓寮犲緟浼氬垏鎹3銆佸鍥撅紝鐜板湪鏄潤鎬佺殑锛榧犳爣鏀句笂鍘讳篃涓嶄細浜х敓鍒囨崲鍙嶅簲锛屽洜涓烘病鏈夌敤JS銆4銆佸鍥撅紝鑾峰彇img锛岃浆鎴怞S瀵硅薄锛屽姞涓猍0]灏卞彲浠ヨ浆js瀵硅薄浜嗐5銆佺劧鍚庤瀹氱粡杩囦簨浠讹紝鍒囨崲鎴愬彟涓...
绛旓細//榧犳爣绉涓婃椂娓呴櫎瀹氭椂鍣ㄨ揪鍒版粴鍔ㄥ仠姝㈢殑鐩殑 butong_net_top.onmouseover=function() {clearInterval(MyMar1)} //榧犳爣绉诲紑鏃堕噸璁惧畾鏃跺櫒 butong_net_top.onmouseout=function(){MyMar1=setInterval(Marquee1,speed)} </script> <!--鍚戜笂婊氬姩浠ｇ爜缁撴潫--> <br> <!--涓嬮潰鏄悜涓嬫粴鍔ㄤ唬鐮--> <div ...
绛旓細<div style="cursor:hand" onmouseover="theimg.src='b.jpg'" onmouseout="theimg.src='a.jpg'"> <img id="theimg" src="a.jpg"> </div> 鍏跺疄濡傛灉鍙槸涓涓鍥剧墖锛屾病鏈夊繀瑕佸仛鎴恉iv锛岀洿鎺ヨ繖鏍峰啓灏辫浜嗭細<img src="a.jpg" style="cursor:hand" onmouseover="this.src='b.jpg'" ...
绛旓細a:hover{ background-img:url(a.jpg);}
绛旓細divs = document.getElementsByTagName('div')[0];//榧犳爣绉鍏ワ紝灏哾ivs鐨刢lassName鏍峰紡璧嬬粰璇ユ爣绛綿ivs.onmouseover = function () {this.className = "divs";}//榧犳爣绉诲嚭锛屽皢绌虹殑className鏍峰紡璧嬬粰璇ユ爣绛綿ivs.onmouseout = function () {this.className = "";}</script></body></html> ...
绛旓細鍙互鐢╦s浜嬩欢鈥渙nmouseover鈥濆拰鈥渙nmouseout鈥濇潵瀹炵幇銆1銆佹柊寤html鏂囨。锛屽湪body鏍囩涓坊鍔犲浘鐗囨爣绛撅紝涓鸿繖涓爣绛捐缃渋d鈥濆睘鎬э紝鐒跺悗璁剧疆鍥剧墖鐨勯粯璁ゆ樉绀哄ぇ灏廲ss灞炴э細2銆佹坊鍔犫渙nmouseover鈥漥s浜嬩欢锛岄鍏堜娇鐢ㄢ渄ocument.getElementById鈥濊幏鍙栧埌鍥剧墖鏍囩锛岀劧鍚庡畾涔榧犳爣绉诲姩鍒板浘鐗涓婃椂鍙戠敓鐨勪簨浠讹紝杩欐椂鍥剧墖灏嗕細鏀惧ぇ锛...
