<style type="text/css">
.hover{
height: 10px;
width: 10px;
}
</style>
</head>
<body>
<div id="img" style="height: 100px; width: 80px;">
</div>
<table>
<tr>
<td><div class="hover" id="hover_01" style="background: gray;"></div></td>
<td><div class="hover" id="hover_02" style="background: red;"></div></td>
<td><div class="hover" id="hover_03" style="background: blue;"></div></td>
<td><div class="hover" id="hover_04" style="background: green;"></div></td>
<td><div class="hover" id="hover_05" style="background: yellow;"></div></td>
</tr>
</table>
<script type="text/javascript" src="jquery-1.11.0.js"></script>
<script type="text/javascript">
$('.hover').hover(function(){
var id = this.id;
var imgElem = $('#img');
if(id == 'hover_01'){
imgElem.html('<input type="image" id="" src="image01.jpg">')
} else if(id == 'hover_02') {
imgElem.html('<input type="image" src="image02.jpg">')
} else if(id == 'hover_03') {
imgElem.html('<input type="image" src="image03.jpg">')
} else if(id == 'hover_04') {
imgElem.html('<input type="image" src="image04.jpg">')
} else if(id == 'hover_05') {
imgElem.html('<input type="image" src="image05.jpg">')
}
});
</script>