Menú q cambia de color
Hola a todos!!
Tengo una duda sobre los menús q cambian de color al hacer rollover
tengo un código javascript q hace esto el problema es que no se cómo decirle que cuando haga rollover sobre la celda tb me cambie el color del texto que se encuentra en esa celda, es posible hacer esto??
Envío el código del menu javascript
<td width="67" bgcolor="#FFFFFF" onmouseover="this.style.backgroundColor='#333366'" onmouseout="this.style.backgroundColor='#ffffff'">
<a href="#" >Texto del menu</a>
</td>
Si se puede hacer me vendria bien tenerlo sino voy a tener q hacer la cutreria de que haya dos rollovers uno el de la celda y por otro lado el del texto :-(
Si entrais en esta dirección http://www.mundojavascript.com/menues/ y teneis el ejemplo de menú q os digo.
Mil gracias :-)
cø
Bueno Gema, te voy a dar dos respuestas
La simple: en las acciones de cambio de color de fondo
onmouseover="this.style.backgroundColor='#333366'"
añade otra que cambie el color en vez del backgroundColor - separado por un punto y coma -
onmouseover="this.style.backgroundColor='#333366';this.style.color='#??????'"
Donde #?????? es el color que le quieras poner al texto. Si por ejemplo, quieres poner el texto amarillo - #FFFF00 -, y que se ponga rojo - #FF0000 - en el rollover, el código sería
<td width="67" bgcolor="#FFFFFF" onmouseover="this.style.backgroundColor='#333366';this.style.color='#FF0000'" onmouseout="this.style.backgroundColor='#ffffff';this.style.color='#FFFF00'">
<a href="#" >Texto del menu</a>
</td>
La respuesta más larga: hay otra manera, que es igual de fácil, pero que usa CSS
Dentro de la etiqueta head del documento - entre <head> y </head> - debes copiar ésto:
<style type="text/css">
td.rollover { background-color: #FFFFFF; color: #FFFF00; }
td.rollover:hover { background-color: #333366; color: #FF0000; }
</style>
poniendo los colores que quieras - background-color es el color del fondo y color el color del texto -. Entonces tienes que poner en la celda <td> que quieres que haga rollover
<td class="rollover"><a href="#">Texto del menú</a></td>
y quitar todo lo demás.
Pruébalo y si tienes alguna duda, ya sabes. :)
Josh
El método CSS el IE se lo pasa por el forro, así que mejor usar el javascript.
Un truqillo que uso para el metodo CSS con el IE, es pasar de meter los links en una tabla y meter A apilados con display: block.
Ejemplo:
<div id="menu">
<a href="url1">item1</a>
<a href="url2">item2</a>
</div>
luego en un css metes:
#menu a {
display: block;
text-decoration: none;
height: 15px;
color: #000000;
background-color: #FFFFFF;
}
#menu a:hover {
color: #FFFFFF;
background-color: #000000;
}
cø
Tienes razón Josh: en IE6 no funciona. No lo había probado.
Cada vez entiendo menos como un navegador tan malo puede estar tan extendido. :(
Phoenix, en su versión 0.5, le da mil patadas.
Pd. Recomiendo mucho muchísimo, a los usuarios de Windows - y Linux y OS/2 - que piensan que Mozilla es muy pesado, que prueben Phoenix 0.5.
gmdesign
Muchas gracias por la información ahora mismo me pongo cn ello ;-)
orange
Me uno a cø en lo de Phoenix ... yo lo uso desde hace algún tiempo y es totalmente recomendable ...
:)
En cuanto a lo de las clases, puedes llegar a un punto internedio, usar CSS y un javascript para cambiar de clase, así:
<code>// Cambiar clases
function cambiaClase(nombreClase){
this.className = nombreClase;
}
...
<td onmouseover="cambiaClase('celdaOn')" onmouseout="cambiaClase('celdaOff')">Mooola</td>
</code>
Y ya en las clases celdaOn y celdaOff puedes hacer lo que quieras
tutututt Profesor Plus
donde me bajo phoenix??
tengo interes en probar nuevas sensaciones ,
orange
De aqui mejor
o si no de aqui
tutututt Profesor Plus
cuando lo pruebe te cuento : )