JS实现校内网"图片圈人"功能效果

下面是HTML：

<div　id="enclose-wrapper">
　　　　<div　id="photo-wrapper"　style="margin:15px　auto;text-align:center;">
　　　　　　　　<img　id="photo"　src=http://tech.ddvip.com/2009-03/"heroes_s3_peter.jpg"　/>
　　　　</div>

　　　　<div>
　　　　
　　　　<ul　id="tag-list">
　　　　<li>相片中：</li>
　　　　<li>
　　　　<span　onmouseover="photoTag.show(0,0,85,66);"　onmouseout="photoTag.hide();">aaa</span>　
　　　　(<a　href="javascript:;"　onclick="photoTag.remove('342',this.parentNode);"　onmouseover="photoTag.show(0,0,85,66);"　onmouseout="photoTag.hide();">删除</a>)
　　　　</li>
　　　　...
　　　　</ul>

　　　　</div>

　　　　<div　id="select-area-box">
　　　　　　　　<div　id="select-area"></div>
　　　　　　　　<span　class="north-west-resize"></span><span　class="north-east-resize"></span>
　　　　　　　　<span　class="south-west-resize"></span><span　class="south-east-resize"></span>
　　　　</div>

　　　　<div　id="form-add-tag"　style="display:none;">
　　　　输入标签：<br　/>
　　　　<input　id="tag-name"　name="tag-name"　type="text"　　/><br　/>
　　　　<button　id="btn-add-tag"　type="button">确认</button>
　　　　<button　id="btn-cancel"　type="button">取消</button>
　　　　</div>
</div>

你可以到这里查看该程序的演示。