<button onClick="action();">click me<img src="frame1.jpg" width="100px" id="ImageButton1"></button>
<button onClick="actionX();">click me<img src="frame2.jpg" width="100px" id="ImageButton2"></button>

<script type="text/javascript">
function action()
{


document.getElementById("ImageButton3").src = 'frameimageB.jpg';
document.getElementById("ImageButton4").src = 'frame2.jpg';
}
function actionX()
{

document.getElementById("ImageButton3").src = 'frameimageW.jpg';
}
</script>


<br>
<br>

<img src="frameimageB.jpg" width="300px" id="ImageButton3">


<style> 
.sample2 .sea {
  height: 80%;
  width: 80%;
  id: ImageButton4;
  position: absolute;
  background-image: url("frame1.jpg");  
  background-position: top right 10px, bottom left, top left;
  background-repeat: no-repeat, repeat-x, repeat-x ;
}



.sample2 .fish {
  background: url("perl.jpg") no-repeat;
  height: 100%;
  width: 100%;
  left: 30px;
  top: 90px;
  position: absolute;
}
</style>

<div class="sample2">
  <div class="sea">                   
    <div class="fish"></div>
  </div>
</div>