Hola Goopy!
Hice un sencillo ejemplo, la imagen que aparece cuando te posicionas sobre una celda se podría hacer con una capa oculta que cuando invoques al evento onMouseOver, modifiques la propiedad de esa capa a
'visible', algo como esto.
Código PHP:
<script language="JavaScript">
function mostrar(objeto){
//Aqui se pone la imagen que quieras mostrar en la celda al ponerte sobre...
objeto.background = '/Picture1.jpg';
document.getElementById('capa').style.visibility = 'visible';
}
//Aqui se pone la imagen que quieras mostrar en la celda al salir...
function ocultar(objeto){
objeto.background = '/Picture2.jpg';
document.getElementById('capa').style.visibility = 'hidden';
}
</script>
Esas 2 funciones son las que se encargan de mostrar y ocultar la capa, ahora lo siguiente es definir las propiedades de nuestra capa, posición, color, etc. y eso lo hacemos mediante hojas de estilo comunmente llamadas
CSS, vamos agregar este código a nuestra cabecera.
Código PHP:
<style type="text/css">
<!--
#capa {
position: absolute;
visibility: hidden;
left: 155px;
top: 12px;
}
-->
</style>
Estamos creando un
Id Selector, ve que lo estoy definiendo como
#capa y no como
.capa que sería un Class Selector, la diferencia es que el primero solamente se puede aplicar una vez al elemento que tenga ese nombre como propiedad Id, pero podrías usar un Class Selector si todas tus capas van a tener propiedades iguales.
Ahora prueba este código, es una tabla con una celda de ejemplo.
Código PHP:
<table width="134" border="1" cellpadding="0" cellspacing="0" bordercolor="#000000">
<tr>
<td width="128" background="" onMouseOver="mostrar(this);" onMouseOut="ocultar(this);">Botonn</td>
</tr>
</table>
<div id="capa"><img src="/Picture2.jpg" width="76" height="57"></div>
Si tienes dudas, me avisas
Suerte!!!