在function中创建鼠标事件

我想做一个图片在线编辑的效果,我想要的效果是,当鼠标指针移出图片边界时图片四周有边框,同时在鼠标指针移出图片边界同时在图片边缘click鼠标使图片可以编辑,如果鼠标指针在移出图片边界时,没有click的话,图片为不可编辑,
请问这个效果怎么写呢?我自己写了一段代码,但是不能实现当鼠标指针移出图片边界时click图片为可编辑
以下是我自己写的代码,希望大家帮帮忙!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<script language="JavaScript">
function div_Over(){
var table_border=document.getElementById("table_edit")
var div_edit=document.getElementById("Layer1");
table_border.style.border="2 solid #ff0000"
div_edit.contentEditable=true;
}
</script>
</head>
<body> 
<div onmouseleave="div_Over()" id="Layer1" style="width:100;height:100"> 
  <table  id="table_edit" width="100" height="100" border="2" cellpadding="1" cellspacing="1" bgcolor="#003333">
    <tr>
      <td width="100"></td>
    </tr>
  </table>
</div>
</body>
</html>