Demo Dynamic HTML - Tablas de colores cuando pasa el ratón

Tabelle colorate dal mouse

Compatibilidad: Ms Internet Explorer

Las tablas HTML son un instrumento que los elaboradores utilizan en gran medida para los más variados objetivos: desde la indicización de datos hasta el diseño de página. El HTML dinámico te permite aplicar un efecto particular: al pasar el ratón por encima de una tabla, ésta cambiará de color para volver a la situación inicial cuando el ratón salga de ella.

[ Muestra el ejemplo práctico ]

el código para insertar en tu página

<TITLE>Demo Dynamic HTML: ejemplo práctico </TITLE>

function changeto(highlightcolor){
source=event.srcElement
if (source.tagName=="TR"||source.tagName=="TABLE")
return
while(source.tagName!="TD")
source=source.parentElement
if (source.style.backgroundColor!=highlightcolor&&source.id!="ignore")
source.style.backgroundColor=highlightcolor
}

function changeback(originalcolor){
if (event.fromElement.contains(event.toElement)||source.contains(event.toElement)||source.id=="ignore")
return
if (event.toElement!=source)
source.style.backgroundColor=originalcolor
}
</script>

</HEAD>

<CENTER><table onMouseover="changeto('lightgreen')" onMouseout="changeback('white')" border=1>
<td>
Texto de prueba</td>
<td>
Texto de prueba
</td>
<td>
Texto de prueba
</td>
<td>
Texto de prueba
</td>
</table></CENTER>

</td>
</table></CENTER>

</body>
</html>

[Baja en un único archivo .zip, las imágenes y demás archivos necesarios
para el funcionamiento de las demo de esta sección]