Ihr wollt weg von den langweiligen Textlinks und eure Seiten ansprechend verlinken? Hier gibt's die perfekte Lösung!

.box1 {
padding: 4px;
font-family: Tahoma;
font-size: 9px;
color: #CCCCCC;
font-weight: bold;
text-align: center;
background-color: #AAAAAA;
width: 100px;
height: 100px;
border: 1px solid #CCCCCC;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5 px;
padding: 3px; }

Wenn ihr einen Hover-Effekt machen wollt, tut ihr das wie folgt:

.box1:hover {

die oben stehenden Befehle

}


So verlinkt ihr die Bilder:

<table>
<tbody>
<tr>
<td width="33%" class="box1"><img class="nav" alt="" src="Bild-URL" /><br />
<br />
<a href="URL">Text</a></td>
<td width="33%" class="box1"><img class="nav" alt="" src="Bild-URL" /><br />
<br />
<a href="URL">Text</a></td>
<td width="33%" class="box1"><img class="nav" alt="" src="Bild-URL" /><br />
<br />
<a href="URL">Text</a></td>
</tr>
</tbody>
</table>

Der Code verlinkt drei Boxen in einer Reihe. Das könnt ihr nätürlich ändern.