Un Mouse Over Dificil

[exagono]

HOLA CHAVOS SABEN QUE QUIERO HACER UN EFECTO MOUSE OVER , EN UNA CELDA CON TEXTO EL CASO ES QUE CUANDO ESTE EL CURSOR ENSIMA DE LA CELDA , ESTA DEVERA DE CAMBIAR DE COLOR Y EL TEXTO TAMBIEN Y DESPUES DE QUITAR EL CURSOR VOLVER A SU ESTADO ORIGINAL, LELLENDO VARIOS POST AQUI ENCONTRE LA FORMA DE CAMBIAR EL COLOR DE LA CELDA ASí COMO DEL TEXTO CUANDO SE HACE EL MOUSEOVER, PERO EL DETALLE ES QUE A MENOS QUE EL CURSOR ESTE SOBRE AMBOS OBJETOS(CELDA Y TEXTO) AMBOS CAMBIAN DE COLOR , SI SOLO TOCO LA CELDA ESTA CAMBIA DE COLOR Y EL COLOR DEL TEXTO QUEDA IGUAL QUE COMO ESTAVA PERDIENDOSE ASI, POR LO CUAL LO QUE HE ESTADO BUSCANDO ES UN SCRIP QUE AL MOMENTO DE TOCAR LA CELDA CAMBIE EL COLOR DE LA MISMA ASI COMO DEL TEXTO SIN NESESIDAD DE TOCAR EL TEXTO
EN ESTA PAGINA HAY UNOS EJEMPLOS SOBRE LO QUE ME REFIERO
www.thedjlist.com www.thedjlist.com

entiendo que mucha gente entra a los foros a ver quien les resuelve su problema , no es mi caso se poco de java pero con solo leer los topics pasados aprendi varios efectos pero este que yo kiero no tengo ni idea de como se pueda hacer

[derkenuke]

Al hacer el mouseover de tu celda deberas cambiar el estilo que afecte al texto para que este cambie sus propiedades, siempre que no quieras cambiar el html que hay dentro de la celda para ponerle etiqeutas:

Código:

celda.onmouseover=function() {
  this.style.backgroundColor="red";
  this.style.color="blue";
}

Así por ejemplo cambias el color de letra y el fondo, pero puedes hacer muchas mas cosas con css.

Espero que sea eso lo que quieres.

[kandemore]

Si la celda y el texto son apropiados, porque no pruebas a hacerlo con el photoshop.
Con dos graficos-fotos sustituyendo una con otra.

No se si te vale de algo el comentario, o esta fuera de lugar.
Pero controlando, quedaría perfecto.

[exagono]

pero en donde pego esto ? celda.onmouseover=function() {
this.style.backgroundColor="red";
this.style.color="blue";
}

[exagono]

lo pego en el td o en el tr o en donde ?

[derkenuke]

Celda sera el id que le pongas a tu celda a la que quieres que se le produzca el efecto onmouseover. El codigo debe ir entre las etiquetas <script> como todos los codigos js.

[exagono]

a ver como que el id ?


esto es un pedaso de la pagina que estoy haciendo


</TD>
</TR>
<tr>
<td width="141" height="16" bgcolor="#E4E4E4" style="border: 1px solid #FFFFFF; padding-left: 4; padding-right: 4; padding-top: 1; padding-bottom: 1">
<p dynamicanimation="fpAnimformatRolloverFP1" fprolloverstyle="border: 1px inset #FFFFFF" onmouseover="rollIn(this)" onmouseout="rollOut(this)" language="Javascript1.2">
<b>
<font face="Verdana" size="2" color="#014058">&nbsp;<img src="../fresh/jpgs/bullet.GIF" width="7" height="7" border="0" align="center">
Registrate</font></b></p>

[derkenuke]

Viva el frontpage e? jaja [ademas creo que solo funcionaria en IE eso].

Bueno a ver, que el js no es lo tuyo, te echo una manita:

Código:

<table>
	<tr>
		<td id="celda">Texto</td>
	</tr>
</table>

<script language="javascript">
document.getElementById("celda").onmouseover=function() {
  this.style.backgroundColor="red";
  this.style.color="blue";
}
</script>

Y no tiene mas. He añadido el getElementById porque teoricamente hay que hacerlo asi.

[exagono]

hoa me sale que el det element no es un objeto o que esta nulo

[exagono]

hola esto es lo que hise en el td de la celda
<td id="celda"><width="141" height="16" bgcolor="#E4E4E4" style="border: 1px solid #FFFFFF; padding-left: 4; padding-right: 4; padding-top: 1; padding-bottom: 1">
<p>
<b>
<font face="Verdana" size="2" color="#014058">&nbsp;<img src="../fresh/jpgs/bullet.GIF" width="7" height="7" border="0" align="center">
Registrate</font></b></p>


y donde comiense la tabla

</TR>
</TABLE>
<script language="javascript">
document.getElementById("celda").onmouseover=funct ion() {
this.style.backgroundColor="red";
this.style.color="blue";
}
</script>

[exagono]

momento lo logre !!!!!!!

[exagono]

pero todavia hay dos cosas
1. como ago el mouse out para que regresen a los colores originales ?

y la otra mis letras originalmente son verde ozcuro y cuando pasa el mouse over la celda si se pone roja pero las letras nose ponen en azul,luego prove el script en un documento en blanco y si funciono bien , despues en mi documento le quite esto <font color="#014058" a la celda , las letras se volvieron negras , pero ahora el script si funciona el fondo se vuelve rojo y las letras en azul ,pero por que no funciona con el color de letras que yo tengo que es verde ozcuro ?

[exagono]

a menos que el color de las letras no sea negro ,el script no cambia el color del texto, ya lo intente tambien poniendo las letras en blando y no las cambia de color

[exagono]

HOLA YA LOGRE TODO QUE ESTEN BIEN LOS COLORES Y QUE REGRESEN A SU ESTADO OIRIGINAL SOLO HABIA QUE AGREGAR EL MISMO SCRIPT PERO CON MOUSE OUT .

GRACIAS EN CUANTO ESTE MI SITIO REMODELADO LES TE AVISO PARA VEAS COMO QUEDO, www.lofresco.com

[exagono]

No Momento Me Equivoque Todavia Hay Algo Que No Queda Las Letra Si No Estan En Negro No Cambian De Color , De Modo Que Al Verla En Preview La Celda Es Gris Y Las Letras Verdes , Cuando Pasa El Mouse Over La Celda Se Pone Azul Claro Y Las Letras Nada, Se Matienen Verdes Y Deverian Cambiar A Azul Fuerte Y Luego Volver A Verdes

Pero Si Pongo Las Letras En Negro Al Pasar El Mouseover Las Las Letras Si Se Ponen Azul Fuerte Y Terminan En Verdes , Pero Si Dejo Esto Asi Al Cargarse La Pagina Estarian Las Letra En Color Negro Y Hasta Que Alguien No Pase El Mouse Por Ensima De La Celda , No Seran Verdes :-p

[derkenuke]

Creo que es porque tiene prioridad el color que le pongas en las etiquetas <font> que el que le apliques en las propiedades style. Intenta probar poniendo los colores y los fondos en tu documento todo con css, evitando las etiquetas <font> a ver.

[exagono]

chin ay con CCS no tengo ni idea

[derkenuke]

Mira, te he hecho una funcion que sirve para cualquier celda:

Código PHP:

  function rollover(id,color,bgColor) {
    var anteriorColor,anteriorBackgroundColor;
    document.getElementById(id).onmouseover=function() {
        anteriorBackgroundColor=this.style.backgroundColor;        //guardamos valores
        anteriorColor=this.style.color;
        this.style.backgroundColor=color;                    //nuevos valores
        this.style.color=bgColor;
    }
    document.getElementById(id).onmouseout=function() {
        this.style.backgroundColor=anteriorBackgroundColor;                    //reestablecemos antiguos valores
        this.style.color=anteriorColor;
        anteriorBackgroundColor=anteriorColor=null;
    }
} 
   

Con esta funcion, teniendo tu codigo (ordenado y ya transformado a css, y le he añadido otra celda para que veas el funcionamiento. Tenias una etiqueta width despues de table que no existe, supongo que la habras querido poner como atributo ):

Código:

<table bgcolor="#ff9933">
	<tr>
		<td id="celda" width="141" height="16" style="background-color:#E4E4E4; font-family:verdana; font-size:10px; color:#014058; border: 1px solid #FFFFFF; padding: 1px 4px 1px 4px; ">
			<img src="../fresh/jpgs/bullet.GIF" width="7" height="7" border="0" align="center"> 
			<b>Registrate</b>
		</td>
	</tr>
	<tr>
		<td id="celda2" width="141" height="16" style="background-color:#E4E4E4; font-family:verdana; font-size:10px; color:#014058; border: 1px solid #FFFFFF; padding: 1px 4px 1px 4px; ">
			<img src="../fresh/jpgs/bullet.GIF" width="7" height="7" border="0" align="center"> 
			<b>Logueate</b>
		</td>
	</tr>
</table>

Para que sea activo el rollover solo tienes que hacer por ejemplo unas llamadas a la funcion asi:

Código PHP:

  rollover("celda","red","blue");
rollover("celda2","#000000","#ffffff"); 
   

Primero el id de la celda, luego el color del texto y luego el color de fondo, asi se creara automaticamente el rollover.


Espero que te guste.