Edit in JSFiddle

<table class="demoTable"><tr><td>
    <tr><td colspan="4"><center><div style="height:100px;width:100px;background-Image:url('http://tech.pro/_sotc/sites/default/files/92/images/test.png')"></div></center></td></tr>
<tr>
<td>
<div style="height:50px;width:50px;background-Image:url('http://tech.pro/_sotc/sites/default/files/92/images/test.png');background-position:0px 0px;"></div>
</td>
<td>
<div style="height:50px;width:50px;background-Image:url('http://tech.pro/_sotc/sites/default/files/92/images/test.png');background-position:-50px 0px;"></div>
</td>
<td>
<div style="height:50px;width:50px;background-Image:url('http://tech.pro/_sotc/sites/default/files/92/images/test.png');background-position:0px -50px;"></div>
</td>
<td>
<div style="height:50px;width:50px;background-Image:url('http://tech.pro/_sotc/sites/default/files/92/images/test.png');background-position:-50px -50px;"></div>
</td>
</tr>
<tr>
<td>
<div style="height:50px;width:50px;background-Image:url('http://tech.pro/_sotc/sites/default/files/92/images/test.png');background-position:25px 25px;"></div>
</td>
<td>
<div style="height:50px;width:50px;background-Image:url('http://tech.pro/_sotc/sites/default/files/92/images/test.png');background-position:-25px 25px;"></div>
</td>
<td>
<div style="height:50px;width:50px;background-Image:url('http://tech.pro/_sotc/sites/default/files/92/images/test.png');background-position:25px -25px;"></div>
</td>
<td>
<div style="height:50px;width:50px;background-Image:url('http://tech.pro/_sotc/sites/default/files/92/images/test.png');background-position:-25px -25px;"></div>
</td>
</tr>
</table>

.da-center {margin: 0 auto;}?a.myLink
{
  display:block;
  background-Image:url('http://tech.pro/_sotc/sites/default/files/92/images/test.png');
  width: 50px;
  height: 50px;
}
a.myLink:hover
{
  background-position:-50px -50px;
}
.demoTable td
{
  padding:0px 10px 10px 10px;
}