请问一下这个网站的在线编辑功能是如何实现的？

Question

大家帮忙看一下，是一个名片在线设计功能。
谁能告诉我是用什么开发的，谢谢了！
http://www.print86.com/zxdy/zxdy_sj.asp?model_id=13

Answer 1

就是使用html(table,div)+javascript+css实现的，其中一些关键源代码如下（仔细阅读其中table和div标签部分）：<!-------------页面要修改的正文部分开始------------------------> 
<form method="post" action="zxdy_sj_save_pic.asp" name="card_design"   autocomplete="off">
<input type="hidden" name="now_txt_id" id="now_txt_id" value="0">
<input type="hidden" name="now_img_id" id="now_img_id" value="0">
<input type="hidden" name="card_bgcolor" id="card_bgcolor" value="#FFFFFF">
<input type="hidden" name="card_bgcolor_cmyk" id="card_bgcolor_cmyk" value="0,0,0,0">
<input type="hidden" name="card_bg_img" id="card_bg_img" >
<input type="hidden" name="card_bg_img_width" id="card_bg_img_width" >
<input type="hidden" name="card_bg_img_height" id="card_bg_img_height">
<input type="hidden" name="now_line_id" id="now_line_id" value="0"><input type="hidden" name="back_now_txt_id" id="back_now_txt_id" value="0">
<input type="hidden" name="back_now_img_id" id="back_now_img_id" value="0">
<input type="hidden" name="back_card_bgcolor" id="back_card_bgcolor" value="#FFFFFF">
<input type="hidden" name="back_card_bgcolor_cmyk" id="back_card_bgcolor_cmyk" value="0,0,0,0">
<input type="hidden" name="back_card_bg_img" id="back_card_bg_img" >
<input type="hidden" name="back_card_bg_img_width" id="back_card_bg_img_width" >
<input type="hidden" name="back_card_bg_img_height" id="back_card_bg_img_height" >
<input type="hidden" name="back_now_line_id" id="back_now_line_id" value="0"><input type="hidden" name="now_side" id="now_side" value="">
<input type="hidden" name="card_design_id" id="card_design_id" value=""><table width="100%" border=0>
<tr >
<td width="463" valign="top">
<table cellspacing=0 cellpadding=0 border=1 bordercolor="#EEEEEEE" >
<tr height=28>
<td background="/ext/sam/images/vgradient.gif">
<img src="/ext/sam/images/spacer.gif" width=1 height=1>
<img src="/ext/sam/images/add_text.gif"  title="添加文字，每项不超过200字符" onMouseOver="this.style.border='1px solid blue';"  onMouseOut="this.style.border='0px'" onClick="add_text()" >
<img src="/ext/sam/images/seperator.gif">
<img src="/ext/sam/images/add_image.gif"   title="添加图片" onMouseOver="this.style.border='1px solid blue';"  onMouseOut="this.style.border='0px'"    onClick="upload_img('new_img',13)" >
<img src="/ext/sam/images/add_bg_img.gif"   title="背景" onMouseOver="this.style.border='1px solid blue';"  onMouseOut="this.style.border='0px'"    onClick="upload_img('bg_img',13)" >
<img src="/ext/sam/images/seperator.gif">
<img src="/ext/sam/images/line.gif"  height=18 title="添加线条或色块"  onMouseOver="this.style.border='1px solid blue';"  onMouseOut="this.style.border='0px'"  onClick="add_line()" >
<img src="/ext/sam/images/seperator.gif">
<img src="/ext/sam/images/colorpen.gif"  title="设置背景颜色"  onMouseOver="this.style.border='1px solid blue';"  onMouseOut="this.style.border='0px'"  onClick="palette('body','card_bgcolor')" >
<img src="/ext/sam/images/seperator.gif">
<img src="/ext/sam/images/unformat.gif" title="删除背景图" onMouseOver="this.style.border='1px solid blue';"  onMouseOut="this.style.border='0px'"  onClick="del_bg_img(get_side_flag())" >
<img src="/ext/sam/images/seperator.gif">
<img src="/ext/sam/images/delete.gif"  title="删除"  onMouseOver="this.style.border='1px solid blue';"  onMouseOut="this.style.border='0px'"  onClick="delete_item()" >
<img src="/ext/sam/images/seperator.gif">
<img src="/ext/sam/images/change_text_style.gif"   title="变更文字排版风格" onMouseOver="this.style.border='1px solid blue';"  onMouseOut="this.style.border='0px'"  onClick="show_text_style()" >
<img src="/ext/sam/images/seperator.gif">
<a href="/zxdy/sj.asp" ><img src="/ext/sam/images/change_model.gif" width=19  title="更换模板（选择其它模板重新开始设计）。如果您只是想更换背景图而保留目前已做的设计，请点击“背景”换钮" onMouseOver="this.style.border='1px solid blue';"  onMouseOut="this.style.border='0px'"  border=0  ></a>
<img src="/ext/sam/images/seperator.gif">
<img src="/ext/sam/images/help.gif"  title="帮助" onMouseOver="this.style.border='1px solid blue';"  onMouseOut="this.style.border='0px'"  onClick="help()" >
</td>
</tr>
<tr height=28>
<td  background="/ext/sam/images/vgradient.gif">
<img src="/ext/sam/images/bold.gif"  id="bold_button" title="粗体"   onMouseOver="this.style.border='1px solid blue';"  onMouseOut="this.style.border='0px'"   onClick="change_bold()" >
<img src="/ext/sam/images/seperator.gif">
<img src="/ext/sam/images/italic.gif"  title="斜体"  id="italic_button" onMouseOver="this.style.border='1px solid blue';"  onMouseOut="this.style.border='0px'"   onClick="change_italic()" >
<img src="/ext/sam/images/seperator.gif">
<img src="/ext/sam/images/color_picker.gif"   title="字体或线条、色块颜色"  onMouseOver="this.style.border='1px solid blue';"  onMouseOut="this.style.border='0px'"  onClick="change_color()">
<img src="/ext/sam/images/seperator.gif">
<select name="font_name" id="font_name" onChange="change_font_family()">
</select>
<select name="font_size" id="font_size"  onChange="change_font_size()">
<script language="javascript">
for(i=5;i<=30;i+=0.5)
{
document.write("<option value='"+(4*i+2) +"'");
if( i==9.5)
{
document.write(" selected ");
}document.write(">"+ i+"</option>");
}
</script>
</select></td>
</tr><tr height=28>
<td background="/ext/sam/images/vgradient.gif">
<img src="/ext/sam/images/btn_av.gif"   title="增加文字间距" onMouseOver="this.style.border='1px solid blue';"  onMouseOut="this.style.border='0px'" onClick="change_letter_spacing(1)" >
<img src="/ext/sam/images/seperator.gif">
<img src="/ext/sam/images/btn_av1.gif"   title="减小文字间距" onMouseOver="this.style.border='1px solid blue';"  onMouseOut="this.style.border='0px'"  onClick="change_letter_spacing(-1)" ><img src="/ext/sam/images/seperator.gif">
<img src="/ext/sam/images/add_line_height.gif"  width=16 id="add_line_height" title="增加行距" onMouseOver="this.style.border='1px solid blue';"  onMouseOut="this.style.border='0px'"  onClick="changeRowSpace(1)" ><img src="/ext/sam/images/seperator.gif">
<img src="/ext/sam/images/del_line_height.gif"  width=16 id="del_line_height" title="减小行距" onMouseOver="this.style.border='1px solid blue';"  onMouseOut="this.style.border='0px'"  onClick="changeRowSpace(-1)" >
<img src="/ext/sam/images/seperator.gif"><img src="/ext/sam/images/left.gif"  height=16 title="文字左对齐" onMouseOver="this.style.border='1px solid blue';"  onMouseOut="this.style.border='0px'" onClick="align_left()" >
<img src="/ext/sam/images/seperator.gif">
<img src="/ext/sam/images/right.gif"  height=16 title="文字右对齐" onMouseOver="this.style.border='1px solid blue';"  onMouseOut="this.style.border='0px'"  onClick="align_right()" >
<img src="/ext/sam/images/seperator.gif"><img src="/ext/sam/images/z_up.gif"  height=16 title="图片或线条色块上移一层" onMouseOver="this.style.border='1px solid blue';"  onMouseOut="this.style.border='0px'" onClick="z_move(1)" >
<img src="/ext/sam/images/seperator.gif">
<img src="/ext/sam/images/z_down.gif"  height=16 title="图片或线条色块下移一层" onMouseOver="this.style.border='1px solid blue';"  onMouseOut="this.style.border='0px'"  onClick="z_move(-1)" ><img src="/ext/sam/images/seperator.gif">
<img src="/ext/sam/images/ref_line.gif"  width=19 id="reference_line_button" title="显示参考线" onMouseOver="this.style.border='1px solid blue';"  onMouseOut="this.style.border='0px'"  onClick="showReferenceLine()" >
</td>
</tr>
</table>