1ª parte ( CSS )
Definimos aqui como ficará o estilo da imagem ao passar o mouse, e do texto padrão.
<style>
.inativo{
text-align:center;
border:1px solid #cccccc;
background-color:#fefefe;
width:120px;
padding:15px;
}
.ativo{
text-align:center;
border:1px solid #ffffff;
width:120px;
padding:15px;
}
.t{font-family:tahoma;font-size:9pt;color:#696969;}
</style>2ª parte ( JavaScript )
Definimos aqui o script que ativa/desativa as funções no link
<script>
function mostra(a1,a2) {
document.getElementById(a2).innerHTML = a1;
}
</script>3ª parte ( Tabela )
Aqui mostramos os exemplos do script, note que cada tabela possui uma div numerada, 1, 2, 3, para adicionar mais, siga a ordem.
<table align=left><tr>
<td><span class="ativo" onMouseOver="mostra('<font class=\'t\'>meu texto 1<br>complemento 1</font>','div1');this.className='inativo'" onMouseOut="mostra('','div1');this.className='ativo'">
<a href=""><img src="banner.gif" border="0" width="120" height="60"></a>
<div style="width:120"><div id="div1"></div></div>
</span></td>
</tr></table>
<table align=left><tr>
<td><span class="ativo" onMouseOver="mostra('<font class=\'t\'>meu texto 2<br>complemento 2</font>','div2');this.className='inativo'" onMouseOut="mostra('','div2');this.className='ativo'">
<a href=""><img src="banner.gif" border="0" width="120" height="60"></a>
<div style="width:120"><div id="div2"></div></div>
</span></td>
</tr></table>
<table align=left><tr>
<td><span class="ativo" onMouseOver="mostra('<font class=\'t\'>meu texto 3<br>complemento 3</font>','div3');this.className='inativo'" onMouseOut="mostra('','div3');this.className='ativo'">
<a href=""><img src="banner.gif" border="0" width="120" height="60"></a>
<div style="width:120"><div id="div3"></div></div>
</span></td>
</tr></table>