html在网页一开始只有一排小图,当鼠标移到其中一张小图上,在上面显示大图怎么实现 HTML,当我鼠标移动到小图片上面的时候，鼠标后面就显示大图...
\u5b8c\u5168\u7528css\u63a7\u5236\u9f20\u6807\u79fb\u5230\u5c0f\u56fe\u7247\u4e0a\u5728\u4e0a\u8fb9\u663e\u793a\u5927\u56fe\u7247\u4f60\u4e3a\u8fd9\u4e2a\u5440\uff0c\u53ef\u4ee5\u5230\u662f\u53ef\u4ee5\u3002\u53ea\u4e0d\u8fc7\u5728ie6\u53ca\u5176\u4ee5\u524d\u7684\u7248\u672c\u4e0a\u662f\u4e0d\u53ef\u4ee5\u7684\u3002\u7ed9\u4f60\u4e00\u4e2a\u4ee3\u7801\uff0c\u4f60\u81ea\u5df1\u770b\u5427\u3002\u628a\u81ea\u5df1\u7684\u56fe\u7247\u6362\u4e00\u4e0b\u5c31\u53ef\u4ee5\u4e86\u3002
\u65e0\u6807\u9898\u6587\u6863
img{height:300px; width:400px;}
img:hover{height:200px; width:200px;}
\u4e0b\u8f7d\u4e00\u4e0bjquery\u63d2\u4ef6\uff0c\u7136\u540e\u65b0\u5efa\u4e00\u4e2aToolTip.js\u6587\u4ef6\uff0c\u5728\u8be5\u6587\u4ef6\u4e0b\u5199\u5165\u4ee5\u4e0b\u4ee3\u7801\uff1a
$(function() {
var x = 10;
var y = 10;
$("a.tooltip").mouseover(function(e) {
this.myTitle = this.title;
this.title = "";
var tooltip = ""; //\u521b\u5efa div \u5143\u7d20
$("body").append(tooltip); //\u628a\u5b83\u8ffd\u52a0\u5230\u6587\u6863\u4e2d
$("#tooltip")
.css({
"top": (e.pageY + y) + "px",
"left": (e.pageX + x) + "px"
}).show("fast"); //\u8bbe\u7f6ex\u5750\u6807\u548cy\u5750\u6807\uff0c\u5e76\u4e14\u663e\u793a
}).mouseout(function() {
this.title = this.myTitle;
$("#tooltip").remove(); //\u79fb\u9664
}).mousemove(function(e) {
$("#tooltip")
.css({
"top": (e.pageY + y) + "px",
"left": (e.pageX + x) + "px"
});
});
})
//]]>
\u5728\u9875\u9762\u5bfc\u5165\u4e24\u4e2a.js\u6587\u4ef6\uff0c
\u6700\u540e\u628a\u56fe\u7247\u7ed1\u5b9a\u5230a\u6807\u8bb0\u5c31\u53ef\u4ee5\u4e86\uff1a
" class="tooltip"> //\u5927\u56fe\u7247\u63d0\u793a
' Width="50px" Height="50px" />
js的鼠标事件，但鼠标移动到小图上面时，对应的大图显示，其他的大图display:none
绛旓細浣犲彲浠ヨ繖鏍凤紝杩欎釜灏忕獥鍙ｉ噷闈㈠凡缁忕畻鏄釜灏忕綉椤浜嗐備綘鐢ㄤ竴涓猟iv鍖呰９iframe,iframe鐢ㄤ簡鏄剧ず缃戦〉銆俤iv鐢ㄦ潵鎺у埗杩欎釜灏忕獥鍙ｇ殑鍏抽棴
绛旓細鍦<body>鏍囩涓坊鍔爐opmargin=鈥0鈥 灏卞彲浠ュ暒 鍚屾椂杩樻湁鍑犱釜灞炴у憿鏄細leftmargin rightmargin 绛夌瓑 姣忎釜椤甸潰鐨勯粯璁ゅ奸兘鏄笌涓婁笅娓镐竴瀹氱殑杈硅窛鐨勩
绛旓細濡備綍鎵撳紑index.html缃戦〉 涓銆佽鎵撳紑index.html缃戦〉锛屽彲浠ラ氳繃浠ヤ笅鍑犵鏂瑰紡锛1. 浣跨敤娴忚鍣ㄧ洿鎺ユ墦寮锛氭壘鍒癷ndex.html鏂囦欢鎵鍦ㄤ綅缃紝鐒跺悗灏嗗叾鎷栨嫿鍒版祻瑙堝櫒绐楀彛鍐呮垨鑰呭鍒舵枃浠惰矾寰勫悗鍦ㄦ祻瑙堝櫒鍦板潃鏍忕矘璐村苟鍥炶溅銆2. 閫氳繃鐐瑰嚮閾炬帴锛氬鏋滄湁浜哄垎浜簡涓涓寘鍚玦ndex.html鏂囦欢鐨勭綉鍧閾炬帴锛屽彲浠ョ洿鎺ョ偣鍑婚摼鎺ュ湪娴忚鍣ㄤ腑...
绛旓細鍏跺疄浣犲彲浠ラ噰鐢ㄥ彉閫氱殑鏂规硶銆傚ぇ鑳屾櫙灏变娇鐢ㄦ暣涓缃戦〉鐨勮儗鏅紝灏忚儗鏅紝浣犲彲浠ユ妸瀹冩斁鍒颁竴涓ぇ鐨勮〃鏍肩殑鍗曞厓鏍间腑銆備笉鐭ヨ繖鏍疯兘鍚︽弧瓒充綘鐨勮姹傘
绛旓細濡傛灉浣犳槸鐢↖E鐨勶紝閭ｈ繖涓氨瀹屽叏涓嶆槸闂浜嗐傛垜鎻愪緵涓涓В鍐崇殑鍔炴硶锛岀粷瀵瑰叏灞忥紝鑰屼笖娌℃湁鍏抽棴銆佹渶灏忓寲绛夋寜閽傚亣璁句綘鐨処NDEX.HTM瀛樻斁鍦―鐩樻牴鐩綍涓嬶紝鍦ㄦ闈笂鍙冲嚮-->鏂板缓-->蹇嵎鏂瑰紡-->杈撳叆:"C:\Program Files\Internet Explorer\IEXPLORE.EXE" -k d:\index.htm(娉ㄦ剰,浠庡啋鍙峰埌瀹,鍖呮嫭寮曞彿,index...
绛旓細<head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>鏃犳爣棰樻枃妗</title> <script language="javascript"> function showimg(str){ document.getElementById("imgshow").src=str;} </script> </head> <body> <div id="left"> <li><img src="1.jpg...
绛旓細鏄痜rom鐨勯棶棰樺惂锛熺粰FROM瀹氫箟涓嬫牱寮 <form id="form1" runat="server" style="margin-top:0; margin-bottom:0;">
绛旓細濡傛灉浣犵殑css瀹氫綅鐨勫昂瀵镐竴鏍峰ぇ鐨勮瘽锛屼綘瀵椤甸潰鏀惧ぇ鎴栫缉灏忥紝涓嶄細鏀瑰彉浣犵殑椤甸潰瀹氫綅鐨勫師灏哄锛屽彧鏄椤甸潰杩涜鏀惧ぇ浜嗚屽凡 濡傛灉浣犲湪缈婚〉鏌ョ湅鍙戠幇涔熸病灏哄涓嶄竴鏍凤紝浣犵湅鐪嬩綘鐨勯〉闈㈡槸鍚﹂兘鏄寜100%鏄剧ず锛屽鏋滀笉鏄寜ctr+榧犳爣婊氳疆杩涜璋冩暣涓鑷寸殑姣斾緥锛屽啀鐪嬬湅鏄惁涓鏍 ...
绛旓細<style type="text/css"> <!-- .mask{ float:left; background: url(images/bg.gif); } --> </style> <table height:50><tr><td class="mask"> 123 </td></tr></table> 鑳屾櫙鍥捐鍋氬ソ瀹藉害锛屾诲搴﹀簲璇ュ拰琛ㄦ牸瀹藉害鐩稿悓銆傝ˉ鍏;娉ㄦ剰锛宑lass="mask" 鍙粰绗竴涓猼d锛屽叾浠栫殑涓嶇粰銆
绛旓細闇瑕佸噯澶囩殑鏉愭枡鍒嗗埆鏈夛細鐢佃剳銆佹祻瑙堝櫒銆乭tml缂栬緫鍣ㄣ1銆侀鍏堬紝鎵撳紑html缂栬緫鍣紝鏂板缓html鏂囦欢锛屼緥濡傦細index.html銆2銆佸湪index.html涓殑<body>鏍囩涓紝杈撳叆html浠ｇ爜锛<textarea style="resize:none"></textarea>銆3銆佹祻瑙堝櫒杩愯index.html椤甸潰锛屾鏃秚extarea鍦ㄧ綉椤涓殑澶у皬琚浐瀹氫笉鍙慨鏀广
