CSS y rollover en <tr>
Hola cabezas pensantes ;)
Soy yo otra vez. Queria consultar otra cosa, con respecto a las hojas de estilo y a la etiqueta de linea de tabla <tr>. Resulta que estoy haciendo una web con un buscador y presento los resultados con una tabla, donde cada linea (<tr>) es un resultado. Mi idea era hacer una hoja de estilo que cuando pasara por encima (rollover) se iluminara toda la linea y también hacer que toda la linea sea un enlace.
No se si me explico muy bien.
He visto que hay menus de navegación donde se usan layers (<DIV>) para esto, pero me preguntaba si es posible de hacer en vez de una casilla, normalmente <td> en toda una fila <tr> y que además sea toda ella un enlace.
TELA!!!.. bueno, muchas gracias por haber leido esto.
CarlosJ
Hola Loopecio,
La mejor manera que se me ocurre para hacer lo que dices(a bote pronto) es utilizando HTML Dinámico, así siempre que sea utilizando un navegador DOM podrás hacer lo que se te antojee. Por ejemplo:
<code>
<tr onMouseOver="this.style.backgroundColor='CCCCCC';" onClick="document.location.href = 'http://www.terra.es';">
<td>Contenido cualquiera</td>
</tr>
</code>
Por supuesto en lugar de tener que meter a capón los atributos CSS o los enlaces, puedes llamar a clases ya creadas o a funciones, para así tener más ordenado el código y que sea más sencillo de actualizar todo.
De cualquier manera, por experiencia, recomiendo que los enlaces se apliquen directamente al contenido que se quiera enlazar con un <a href="#"> en lugar de a todo el <tr>, resulta más "usable".
Un saludo.
CarlosJ
Olvidaba que para cambiar las clases dinámicamente con sintaxis DOM hay que poner:
<code>
document.getElementById('elelemento').className ='laclase';
</code>
Así es bastante más cómodo.
Un saludo.
orange
Lo de cambiar el nombre de la clase es más límpio, es lo que se utiliza en la nueva versión del DNED.
loopecio
Gracias.. Lo de <tr> lo entiendo, pero lo de document.getElementById?? Se me pasa un poco, pero bueno, ya investigo yo.
MERCI CARLOS, MERCI ORANGE!
orange
<tr id="teerre"><td>Hola Loopecio</td></tr>
Para hacer referencia a ese tr en concreto has de usar la sintaxis:
document.getElementById('teerre').className ='nombreClase';
No uses esto porque no lo pillan todos los navegadores:
document.teerre.className = 'nombreClase';
CarlosJ
Bien explicado
jmrufo
me interesa esto que comentáis orange pero ando perdidísimo, se supone que la referencia viene de una función en js¿?...
[/code]
orange
Sí, exacto puede ser una función en JavaScript, aunque lo puedes meter directamente como te decía antes Carlos, asi (te lo separo para que lo veas bien):
<tr
onMouseOver="this.className='celdaON';"
onMouseOut ="this.className='celdaOFF';"
onClick="document.location.href = 'http://www.terra.es';"
class="celdaOFF"
>
<td>Contenido cualquiera</td>
</tr>
loopecio
JUUURRRRRRR...
Yo flipo con los que programais!. Además teneis algo de adivinos, por que eso que explicas ahora ORANGE, me va al pelo para el siguiente problema que me ha surgido. Resulta que tengo la linea <tr> con varias celdas y uso dos colores para hacer una division logica y grafica. El problema que me surgia era que con el rollover, me volvia todas las celdas a un mismo color. Ahora, al ver esto he pensado que se puede dar un id a cada celda y darle la orden en el rollout, de que aplique una hoja de estilo determinada a cada celda para que vuelva a su color predeterminado.
iujuuuu!!. Ya voy pillando el rollito.
** MERCI **
orange
Si vas a hacer muchas cosas entonces te recomendaría que utilizases funciones, más que nada porque sino luego es un pollo editar las cosas en el onMouse...
Yo lo dejaría así:
<tr
onMouseOver="rollOver(parametros);"
onMouseOut ="rollOut(parametros);"
onClick="naveGar();"
class="celdaOFF"
>
<td>Contenido cualquiera</td>
</tr>
----------------------------------------------------------------
function rollOver(parametros) {
Aqui ya checkeas ids y le vas dando a cada cual su clase
No hace falta que uses parametros si no quieres,
pero recuerda que los puedes usar para no escribir 20 funciones con 20 ids o lo que sea ...
}
function rollOut(parametros) {
Lo mismo
}
function naveGar(parametros) {
Puedes mandarle donde quieras pasando el url como parametro
}
jmrufo
me lo he tenido que leer todo dos veces pero lo he logrado entender :D, se sale, la última vez que utilizé este efecto fue con this.style... por lo que tuve que editar cada td.
orange
Puedes seguir usando THIS para ahorrarte dar un id a cada celda, asi:
<tr onMouseOver="rollOver(this);" onMouseOut ="rollOut(this);" onClick="naveGar('enlace.htm');" class="celdaOFF">
<td>Contenido cualquiera</td>
</tr>
Al loro con que a la función naveGar se le pasa el url ENTRE COMILLAS SIMPLES
function rollOver(celda) {
celda.className = "celdaON";
}
function rollOut(celda) {
celda.className = "celdaOFF";
}
function naveGar(url) {
ducoment.location.href = url;
}
loopecio
GLUPSSS..!! que nivel!
jajaja.. muchas gracias MAESE ORANGE! voy a masticar un poco toda tu info, a ver si lo he pillado bien, pues parece muy útil. De momento, no dejas de sorprenderme...
orange
Chico, píllate un librito de Javascript y otro de CSS y verás que esto no es más que una pequeñez.
loopecio
Yo es que soy de letras tio, pero hago un esfuerzo sobrehumano cada vez que me meto en programación. Justo la semana pasada me pille un libro de CSS, el de anaya multimedia, y bueno.. me esta resultando muy espeso, pero bueno.. EL QUE LA SIGUE LA CONSIGUE, y mas con gente como vosotros que sois cojonudos!
orange
Uy!! si te refieres al de Cascading Style Sheets creo que no encontrarás lo que buscas, porque ese libro tiene otros objetivos
Hablo de él aqui
CSS y XHTML
loopecio
Si, ese es el que tengo.. Me resulta algo espeso, pero bueno, tengo que empezar a meterme caña. Por cierto, cuando dices que tiene otro objetivo, a que te refieres?
orange
Pues a que no es un libro para cambiar los colores de las celdas, sino para introducirnos a la maquetación de páginas web mediante CSS
En el link uq e te he puesto antes hago un resumen del libro, échale un ojo https://www.domestika.org/foros/viewtopic.php?p=24429