由v2ex的回复页面的源码而来
<
html
>
< head >
< style type ="text/css" > ...
body, html {...}{
margin: 0px;
padding: 0px;
font-family: "Lucida Grande", Tahoma, Verdana, arial, sans-serif, hei;
background: #FFF url("/img/bg_city.jpg") 50% 0 fixed repeat-y;
}
div.btn_2_o {...}{
width: 120px;
height: 21px;
background-image: url("btn_bg.png");
-moz-border-radius: 5px;
background-color: #E0E0E0;
padding: 0px;
margin: 0px;
}
div.btn_2_i {...}{
text-align: center;
padding-top: 3px;
color: #FFF;
font-size: 12px;
}
div.btn_2_i a:link, div.btn_2_i a:visited, div.btn_2_i a:active {...}{
text-decoration: none;
color: #000;
}
div.btn_2_i a:hover {...}{
text-decoration: none;
color: #333;
}
.tip_i {...}{
font-size: 12px;
color: #AFAFAF;
text-shadow: none;
}
</ style >
< SCRIPT LANGUAGE ="JavaScript" > ...
<!--
var getObj = function(objId) ...{
return document.all ? document.all[objId] : document.getElementById(objId);
}
//-->
</ SCRIPT >
</ head >
< body >
< div align ="left" style ="margin: 10px 0px 0px 0px; padding-left: 390px;" >
< script type ="text/javascript" > ...
var i = new Image(15,15); i.src="loading.gif";
var change = function() ...{
var c = getObj("btn_8323");
c.innerHTML = "<img src=loading.gif align=absmiddle /> <span class=tip_i>Requesting</span>";
//var o = getObj("form_topic_reply");return o.submit();
}
</ script >
< div id ="btn_8323" align ="center" style ="width: 120px;" >
< div class ="btn_2_o" align ="left" onclick ="change();" >
< div class ="btn_2_i" align ="center" >
< a href ="#;" onclick ="change();" onmousedown ="change();" > Submit </ a >
</ div >
</ div >
</ div >
</ div >
</ body >
</ html >
< head >
< style type ="text/css" > ...
body, html {...}{
margin: 0px;
padding: 0px;
font-family: "Lucida Grande", Tahoma, Verdana, arial, sans-serif, hei;
background: #FFF url("/img/bg_city.jpg") 50% 0 fixed repeat-y;
}
div.btn_2_o {...}{
width: 120px;
height: 21px;
background-image: url("btn_bg.png");
-moz-border-radius: 5px;
background-color: #E0E0E0;
padding: 0px;
margin: 0px;
}
div.btn_2_i {...}{
text-align: center;
padding-top: 3px;
color: #FFF;
font-size: 12px;
}
div.btn_2_i a:link, div.btn_2_i a:visited, div.btn_2_i a:active {...}{
text-decoration: none;
color: #000;
}
div.btn_2_i a:hover {...}{
text-decoration: none;
color: #333;
}
.tip_i {...}{
font-size: 12px;
color: #AFAFAF;
text-shadow: none;
}
</ style >
< SCRIPT LANGUAGE ="JavaScript" > ...
<!--
var getObj = function(objId) ...{
return document.all ? document.all[objId] : document.getElementById(objId);
}
//-->
</ SCRIPT >
</ head >
< body >
< div align ="left" style ="margin: 10px 0px 0px 0px; padding-left: 390px;" >
< script type ="text/javascript" > ...
var i = new Image(15,15); i.src="loading.gif";
var change = function() ...{
var c = getObj("btn_8323");
c.innerHTML = "<img src=loading.gif align=absmiddle /> <span class=tip_i>Requesting</span>";
//var o = getObj("form_topic_reply");return o.submit();
}
</ script >
< div id ="btn_8323" align ="center" style ="width: 120px;" >
< div class ="btn_2_o" align ="left" onclick ="change();" >
< div class ="btn_2_i" align ="center" >
< a href ="#;" onclick ="change();" onmousedown ="change();" > Submit </ a >
</ div >
</ div >
</ div >
</ div >
</ body >
</ html >
点击之前截图
点击之后截图
本段代码所需要的图片
loading.gif
btn_bg.png