（关于onMouseOver、onMouseOut、onClick后的动作）请问这个效果如何实现？

有两个div），命名为A和B，初始的时候，B的背景图片为1，A的背景图片也为1，要求实现如下效果：
1.当鼠标移动到A时（onMouseOver）：A背景图片为2；
2.当鼠标离开A时（onMouseOut）：A背景图片为1；
3.当鼠标点击A时（onClick）：A的背景图片变成3，而B的背景图片变成1；并且鼠标再次点击A之前，背景图片不变，直到B被点击后才会再继续变换。

<script type="text/javascript">
var flag=1;
function MouseOver(){
if(flag==1){
document.getElementById('DivA').style.backgroundImage='url(2.jpg)';
}else{
return false;
}
}
function MouseOut(){
if(flag==1){
document.getElementById('DivA').style.backgroundImage='url(1.jpg)';
}else{
return false;
}
}
</script>

<div id="DivA" 1.jpg'); width:120px; height:100px; cursor:pointer;" onMouseOver="MouseOver();" onMouseOut="MouseOut();" onClick="this.style.backgroundImage='url(3.jpg)';document.getElementById('DivB').style.backgroundImage='url(1.jpg)';flag=0;"></div>
<br /><br /><br /><br />
<div id="DivB" 1.jpg'); width:120px; height:100px; cursor:pointer;" onClick="document.getElementById('DivA').style.backgroundImage='url(1.jpg)'"></div>

可以在dreamweaver的行为里面添加