problema con document.all o con innerHTML

[CHuLoSoY]

Soy principiante en Javascript y estaba haciendo un código para cambiar el estilo de una celda con eventos onmouseover y onmouseout. El código js que tengo es el sigiuente:

function cambiarcolor(clase,activo,ancho,align)
{
if (activo == "activado"){
document.all.tablacambio = "<td class='"+clase+"' width='"+ancho+"' align="+align+">";
}
else {
document.all.tablacambio = "<td class='"+clase+"' width='"+ancho+"' align="+align+">";
}
}

y en el html tengo esto:

<div id="tablacambio" name="tablacambio" onmouseover="javascript:cambiarcolor('celdaactiva' ,'activado','50%','center')" onmouseout="javascript:cambiarcolor('celdabienveni da3','desactivado','50%','center')"><TD class=celdabienvenida3 width=50% id=tablacambio name=tablacambio align=center valign=top></div>

¿Qué estoy haciendo mal? ¿Voy por buen camino?

[TurKa]

Hola CHuLoSoY:

Por lo que veo en el código hay algunos errores de concepto en las funciones que utilizas.

En principio siempre que desees modificar el código HTML de un elemento de la página, debes utilizar:

Código:

document.getElementById('id').innerHTML = "<b>codigo HTML Nuevo</b>";

Por otro lado las ID de cada elemento deben ser únicas. En el ejemplo que das, tenés un layer y una celda con la misma id (tablacambio). Esto indefectiblemente genera un error.

Por último tenés un layer envolviendo una celda. Ahí hay un problema de estructura: las celdas deben estar dentro de filas y las filas dentro de tablas.

Creo que igual se entiende la idea de lo que necesitás hacer. Sería que al pasar el mouse por una celda, esta cambie de color (o de estilo). Una forma sencilla que tenés de hacerlo es cambiar la clase llamandola desde el evento onMouseOver directamente sobre la celda (podrás olvidarte del script):

Código:

<TD class=celdabienvenida3 width=50% id=tablacambio name=tablacambio align=center valign=top onMouseOver="this.className='celdaactiva'">

Si deseas utilizar un script, en esta URL hay un ejemplo que te puede servir:
http://gitana2007.blogspot.com/2007/...leccionar.html

Saludos!

[chalchis]

otro tip puede ser esto

http://www.desarrolloweb.com/faq/135.php

saludos

[CHuLoSoY]

Gracias amigos, dándole al coco he hecho algo más sencillo y funcionable. Pongo el código por si a alguien le interesa:

<td class=celdabienvenida2 width=50% align=center valign=top onmouseover='this.style.background="#FFC400"' onmouseout='this.style.background="#e4e4e4"'>

Me ahorro todo lo anterior. Gracias de todas formas. TurKa me ha dado una buena lección, en serio ;)

[TurKa]

Iniciado por CHuLoSoY

Gracias amigos, dándole al coco he hecho algo más sencillo y funcionable. Pongo el código por si a alguien le interesa:



Me ahorro todo lo anterior. Gracias de todas formas. TurKa me ha dado una buena lección, en serio ;)

Buenísima la solución! Muy sencilla e hiper funcional :))
Y me alegro que te haya servido la explicación que intenté hacer, aunque leyéndola ahora me doy cuenta que por escribir rápido quedó medio... medio... como... a lo bestia digamos

Un abrazo!

[tunait]

Podrías simplificarlo aún más haciendo algo así

Código:

<script type="text/javascript">
function fondoCelda(celda, over){
	celda.style.background = over ? '#FFC400' : '#e4e4e4';
}
</script>

y a tus celdas les pides

Código:

 onmouseover="fondoCelda(this, 1)" onmouseout="fondoCelda(this, 0)

Así si un día quieres cambiar los colores lo haces sólo en la función js.


un saludo