debes aprender html y css para hacer eso, la forma básica es que a cada etiqueta <img> la rodees con una etiqueta <a> y luego crees u estilo que afecte a la etiqueta <a> cuando esta en estado hover. Mira:
Código:
<html>
<head>
<title>Sin título-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<STYLE type="text/css">
a {}
a:hover {border: 1px solid #F0F}
</STYLE>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (Sin título-1) -->
<table id="Tabla_01" width="1280" height="960" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="6">
<img src="imágenes/Sin-título-1_01.png" width="1280" height="510" alt=""></td>
</tr>
<tr>
<td>
<a href="pagina.html"><img src="imágenes/Sin-título-1_02.png" width="231" height="56" alt=""></a></td>
<td>
<a href="pagina.html"><img src="imágenes/Sin-título-1_03.png" width="217" height="56" alt=""></a></td>
<td>
<a href="pagina.html"><img src="imágenes/Sin-título-1_04.png" width="251" height="56" alt=""></a></td>
<td>
<a href="pagina.html"><img src="imágenes/Sin-título-1_05.png" width="217" height="56" alt=""></a></td>
<td>
<a href="pagina.html"><img src="imágenes/Sin-título-1_06.png" width="194" height="56" alt=""></a></td>
<td>
<a href="pagina.html"><img src="imágenes/Sin-título-1_07.png" width="170" height="56" alt=""></a></td>
</tr>
<tr>
<td colspan="6">
<img src="imágenes/Sin-título-1_08.png" width="1280" height="394" alt=""></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>