Foros del Web » Creando para Internet » HTML »

Cambiar fondo de celda al onMouseover

Estas en el tema de Cambiar fondo de celda al onMouseover en el foro de HTML en Foros del Web. Que tal. Mi primera pregunta es: Como hago para que al ingresar en mi sitio, X celda TR tenga X imagen de fondo, y al ...
  #1 (permalink)  
Antiguo 23/12/2008, 15:26
 
Fecha de Ingreso: julio-2008
Mensajes: 133
Antigüedad: 9 años, 5 meses
Puntos: 1
Cambiar fondo de celda al onMouseover

Que tal.

Mi primera pregunta es:

Como hago para que al ingresar en mi sitio, X celda TR tenga X imagen de fondo, y al pasar por otro TR, ESE TR tenga una imagen background y la anterior celda ya no la tenga mas ?

No se si se entiende, saludos
  #2 (permalink)  
Antiguo 23/12/2008, 17:34
 
Fecha de Ingreso: febrero-2008
Mensajes: 48
Antigüedad: 9 años, 10 meses
Puntos: 2
Respuesta: Cambiar fondo de celda al onMouseover

Has probado con los estilos css??

Necesitarias un estilo para tr que tenga la imagen inicial:

Código:
tr{
background:url(miimagendefondo.png);
}
y para que cambie a otra imagen cuando tenga el raton encima necesitas usar el selector hover

Código:
tr:hover{
background:url(miotraimagendefondo.png);
}
Si quieres que cambie la imagen de otro elemento cuando pasas el raton por encima de un tr vas a tener que usar alguna funcion javascript, tendrás que buscar información sobre el evento onMouseOver de javascript.
  #3 (permalink)  
Antiguo 23/12/2008, 17:34
Avatar de trasgukabi  
Fecha de Ingreso: septiembre-2004
Mensajes: 2.749
Antigüedad: 13 años, 3 meses
Puntos: 18
Respuesta: Cambiar fondo de celda al onMouseover

onmouseover="this.style.bgcolor='#000000'"
onmouseout="this.style.bgcolor='#FFFFFF'"
  #4 (permalink)  
Antiguo 23/12/2008, 19:03
 
Fecha de Ingreso: julio-2008
Mensajes: 133
Antigüedad: 9 años, 5 meses
Puntos: 1
Respuesta: Cambiar fondo de celda al onMouseover

La 2da repsuesta no me funciono.

La primera, las de CSS, como hago para que, por ejemplo, mi TR tiene una ID de tabla_noticia, entonces, que el CSS se aplique solo al TR con ID tabla_noticia ?

Gracias.-
  #5 (permalink)  
Antiguo 23/12/2008, 19:44
Avatar de f0vela  
Fecha de Ingreso: diciembre-2008
Ubicación: Guatemala
Mensajes: 48
Antigüedad: 9 años
Puntos: 1
Respuesta: Cambiar fondo de celda al onMouseover

#tabla_noticia { background:url(miimagendefondo.png); }
#tabla_noticia:hover { background:url(miotraimagendefondo.png); }

donde coloques el ID tabla_noticia este CSS será aplicado, sea tr, td, div, span, etc...
  #6 (permalink)  
Antiguo 23/12/2008, 19:58
 
Fecha de Ingreso: julio-2008
Mensajes: 133
Antigüedad: 9 años, 5 meses
Puntos: 1
Respuesta: Cambiar fondo de celda al onMouseover

esta se acerco un poco mas a lo que queria, el tema es asi:

yo tengo esto: http://www.pinchapasion.net/nueva/index.php

Como pueden ver, cuando se pasa por alguna de las noticias esas chiquitas, se pone el fondo colorado, cuando sale, se va.

ENTONCES, EN RESUMEN, AL HACER ONMOUSEOVER EN LA TABLA SE PONE COLORADO, Y SI SE VA CON EL MOUSE DE LA TABLA, SIGUE EN COLORADO, PERO SI PASA POR OTRA TABLA DE NOTICIA, ESA TABLA DE NOTICIA SE PONGA EN COLORADO Y LA OTRA VUELVA A ESTAR EN BLANCO.

No se si alguien me habra entendido.

Espero que alguien tenga la respuesta a mi duda.

Saludos

Última edición por ppnet; 23/12/2008 a las 20:05
  #7 (permalink)  
Antiguo 23/12/2008, 20:20
Avatar de f0vela  
Fecha de Ingreso: diciembre-2008
Ubicación: Guatemala
Mensajes: 48
Antigüedad: 9 años
Puntos: 1
Respuesta: Cambiar fondo de celda al onMouseover

Perdona que no comprenda lo que necesitas:

Pero leyendo lo que escribes me perdí...

Al momento al hacer mouseOver sobre una de las celdas donde estan las noticias con los thumbnails de las imagenes el fondo cambia a rojo.

Al momento de salirce de la celda (mouseOut) de la celda esta regresa a blanco.

Si te posicionas sobre otra celda esta cambia el fondo a color rojo y si te sales de esta y te pones en otra celda esta nueva celda cambia a rojo y la anterior pasa a blanco.

Asi esta ahorita.

Que es lo que necesitas aparte de esto?? (esto es lo que no comprendi)

Saludos.
  #8 (permalink)  
Antiguo 23/12/2008, 20:29
 
Fecha de Ingreso: julio-2008
Mensajes: 133
Antigüedad: 9 años, 5 meses
Puntos: 1
Respuesta: Cambiar fondo de celda al onMouseover

Lo que necesito es que SIEMPRE haya una celda en rojo, entonces, que nada mas cambie el fondo cuando pasa a otra celda, y esta se va a poner en rojo..

No se si me entendistes ahora.


Espero que me puedas ayudar :)


Gracias
  #9 (permalink)  
Antiguo 23/12/2008, 20:30
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 9.740
Antigüedad: 9 años, 3 meses
Puntos: 2112
Respuesta: Cambiar fondo de celda al onMouseover

Tambien yo la veo bien, excepto porque la primera noticia tiene el texto en blanco y no puedes leer nada hasta que se hace el onmouseover y el resto no se lee bien cuando tiene el fondo rojo.

Por otra parte, espero que no vayas a dejar las imagenes con los tamaños actuales, tardan mucho en descargarse, es mejor crear versiones pequeñas con los tamaños adecuados, con lo que te ahorras mucho ancho de banda y tiempo de descarga.

Edito: para eso debes crear otro estilo y aplicarlo a la que debe estar seleccionada, puedes hacerlo por:

#actual { atributos; }
#actual:hover { atributos }
__________________
- León, Guanajuato
- GV-Foto
  #10 (permalink)  
Antiguo 23/12/2008, 20:31
Avatar de trasgukabi  
Fecha de Ingreso: septiembre-2004
Mensajes: 2.749
Antigüedad: 13 años, 3 meses
Puntos: 18
Respuesta: Cambiar fondo de celda al onMouseover

hablando de otra cosa: las imágenes que pones en las noticias, las optimizarás después, no? hay una de 1.35mb
  #11 (permalink)  
Antiguo 23/12/2008, 20:38
Avatar de f0vela  
Fecha de Ingreso: diciembre-2008
Ubicación: Guatemala
Mensajes: 48
Antigüedad: 9 años
Puntos: 1
Respuesta: Cambiar fondo de celda al onMouseover

aaaaaaaaaa ahora si te comprendo.

ok ok...

puedes hacer esto:

#tabla_noticia { background:url(miimagendefondo.png); }
#tabla_noticia:hover { background:url(miotraimagendefondo.png); }
#tabla_noticia_current { background:url(miimagendefondo.png); }

Y para la que este seleccionada como de despliege principal debes usar el id tabla_noticia_current.

Al final deberia verse algo asi:

ITEM1 (usa el id tabla_noticia_current)
ITEM2 (usa el id tabla_noticia)
ITEM3 (usa el id tabla_noticia)
ITEM4 (usa el id tabla_noticia)
ITEM5 (usa el id tabla_noticia)

Asi el ITEM1 no cambia al pasarle por encima ya que no tiene un hover, pero los demas si cambian ya que el id tabla_noticia si tiene un hover.

PD: Concuerdo con Triby y con trasgukabi en cuanto a las imagenes y las imagenes miniatura ya que como están actualmente se tardan mucho en descargar.
  #12 (permalink)  
Antiguo 23/12/2008, 20:40
 
Fecha de Ingreso: julio-2008
Mensajes: 133
Antigüedad: 9 años, 5 meses
Puntos: 1
Respuesta: Cambiar fondo de celda al onMouseover

Sisi, no me di cuenta que pesan mucho, igualmente son de prueba.

Respondiendole a Triby, no entendi.

Por si no entendieron, yo necesito que SIEMPRE una de las celdas quede en rojo, la UNICA forma de que quede en blanco es pasando a otra celda ( y la nueva celda ahora queda en rojo )

Si alguien tiene la solucion, se lo agradeceria.










EDIT: LEYENDO MENSAJE DE FOVELA
  #13 (permalink)  
Antiguo 23/12/2008, 20:44
 
Fecha de Ingreso: julio-2008
Mensajes: 133
Antigüedad: 9 años, 5 meses
Puntos: 1
Respuesta: Cambiar fondo de celda al onMouseover

Cita:
Iniciado por f0vela Ver Mensaje
aaaaaaaaaa ahora si te comprendo.

ok ok...

puedes hacer esto:

#tabla_noticia { background:url(miimagendefondo.png); }
#tabla_noticia:hover { background:url(miotraimagendefondo.png); }
#tabla_noticia_current { background:url(miimagendefondo.png); }

Y para la que este seleccionada como de despliege principal debes usar el id tabla_noticia_current.

Al final deberia verse algo asi:

ITEM1 (usa el id tabla_noticia_current)
ITEM2 (usa el id tabla_noticia)
ITEM3 (usa el id tabla_noticia)
ITEM4 (usa el id tabla_noticia)
ITEM5 (usa el id tabla_noticia)

Asi el ITEM1 no cambia al pasarle por encima ya que no tiene un hover, pero los demas si cambian ya que el id tabla_noticia si tiene un hover.

PD: Concuerdo con Triby y con trasgukabi en cuanto a las imagenes y las imagenes miniatura ya que como están actualmente se tardan mucho en descargar.

mm lamentablemente tampoco jaja. no diferenciemos la celda 1 del resto.

Quizas no soy claro, la cosa es asi:

Tengo 5 celdas.

Al hacer MouseOver, quiero que pase a se roja, esto lo logramos.

Bien, imaginemos que SACO el mouse de esa celda hacia afuera, bueno, en ese caso QUIERO QUE SIGA ESTANDO ROJA ESA CELDA, que no se vaya el efecto.

En caso de que pase de una CELDA A LA OTRA, AHI SI QUE NO ESTE MAS EN ROJA Y QUE EN LA QUE NOS POSICIONAMOS, ESA PASE A ESTAR EN ROJA.


O sea, en resumen, NUNCA van a quedar TODAS en blanco.
  #14 (permalink)  
Antiguo 23/12/2008, 21:10
Avatar de f0vela  
Fecha de Ingreso: diciembre-2008
Ubicación: Guatemala
Mensajes: 48
Antigüedad: 9 años
Puntos: 1
Respuesta: Cambiar fondo de celda al onMouseover

Si, te comprendo, pero esto no se puede hacer solamente con CSS tendras que usar javascript y CSS para poder tener este efecto.

Con lo que te especifique anteriormente tendras que hacer una funcion que al estar onmouseover sobre la celda ejecute la función javascript que cambie el estilo de la celda al current y que al salir de la celda no regrese al anterior hasta que entre a la nueva celda.

Algo asi (este ejemplo es básico y supone que tienes solo 5 noticias desplegadas a la vez con 5 diferentes id's):

Código css:
Ver original
  1. <style>
  2. /* Usaremos clases en lugar de id's */
  3.  
  4. .td_current { background:url(miotraimagendefondo.png); }
  5. .td_normal { background:url(miimagendefondo.png); }
  6. </style>

Código javascript:
Ver original
  1. <script>
  2. // Esta función permite encontrar los elementos dentro de la pagina que tengan una clase determinada
  3. var getElementsByClassName = function (className, tag, elm){
  4.     if (document.getElementsByClassName) {
  5.         getElementsByClassName = function (className, tag, elm) {
  6.             elm = elm || document;
  7.             var elements = elm.getElementsByClassName(className),
  8.                 nodeName = (tag)? new RegExp("\\b" + tag + "\\b", "i") : null,
  9.                 returnElements = [],
  10.                 current;
  11.             for(var i=0, il=elements.length; i<il; i+=1){
  12.                 current = elements[i];
  13.                 if(!nodeName || nodeName.test(current.nodeName)) {
  14.                     returnElements.push(current);
  15.                 }
  16.             }
  17.             return returnElements;
  18.         };
  19.     }
  20.     else if (document.evaluate) {
  21.         getElementsByClassName = function (className, tag, elm) {
  22.             tag = tag || "*";
  23.             elm = elm || document;
  24.             var classes = className.split(" "),
  25.                 classesToCheck = "",
  26.                 xhtmlNamespace = "http://www.w3.org/1999/xhtml",
  27.                 namespaceResolver = (document.documentElement.namespaceURI === xhtmlNamespace)? xhtmlNamespace : null,
  28.                 returnElements = [],
  29.                 elements,
  30.                 node;
  31.             for(var j=0, jl=classes.length; j<jl; j+=1){
  32.                 classesToCheck += "[contains(concat(' ', @class, ' '), ' " + classes[j] + " ')]";
  33.             }
  34.             try {
  35.                 elements = document.evaluate(".//" + tag + classesToCheck, elm, namespaceResolver, 0, null);
  36.             }
  37.             catch (e) {
  38.                 elements = document.evaluate(".//" + tag + classesToCheck, elm, null, 0, null);
  39.             }
  40.             while ((node = elements.iterateNext())) {
  41.                 returnElements.push(node);
  42.             }
  43.             return returnElements;
  44.         };
  45.     }
  46.     else {
  47.         getElementsByClassName = function (className, tag, elm) {
  48.             tag = tag || "*";
  49.             elm = elm || document;
  50.             var classes = className.split(" "),
  51.                 classesToCheck = [],
  52.                 elements = (tag === "*" && elm.all)? elm.all : elm.getElementsByTagName(tag),
  53.                 current,
  54.                 returnElements = [],
  55.                 match;
  56.             for(var k=0, kl=classes.length; k<kl; k+=1){
  57.                 classesToCheck.push(new RegExp("(^|\\s)" + classes[k] + "(\\s|$)"));
  58.             }
  59.             for(var l=0, ll=elements.length; l<ll; l+=1){
  60.                 current = elements[l];
  61.                 match = false;
  62.                 for(var m=0, ml=classesToCheck.length; m<ml; m+=1){
  63.                     match = classesToCheck[m].test(current.className);
  64.                     if (!match) {
  65.                         break;
  66.                     }
  67.                 }
  68.                 if (match) {
  69.                     returnElements.push(current);
  70.                 }
  71.             }
  72.             return returnElements;
  73.         };
  74.     }
  75.     return getElementsByClassName(className, tag, elm);
  76. };
  77.  
  78.  
  79. // Esta función es la que cambiará la clase de la celda en la que esta parada
  80. function cellChange(idActual){
  81.    
  82.     // encuentra todos los elementos que tienen td_current como clase y los cambia a td_normal
  83.     var normal = getElementsByClassName('td_current');
  84.     var contador = 0;
  85.     while (normal[contador])
  86.     {
  87.         normal[contador].style.class = 'td_normal';
  88.         contador++;
  89.     }
  90.  
  91.     // al td el id actual le cambia la clase a td_current para que este rojo
  92.     document.getElementById(idActual).style.class = 'td_current';
  93.  
  94. }
  95. </script>

La primera td_current es solo para que al cargar tu pagina esta inicie con la primera noticia como seleccionada.

Código html:
Ver original
  1. <tr id='noticia1' class="td_current" onMouseOver="cellChange('noticia1');">
  2.     <td>Noticia1</td>
  3. </tr>
  4. <tr id='noticia2' class="td_normal" onMouseOver="cellChange('noticia2');">>
  5.     <td>Noticia2</td>
  6. </tr>
  7. <tr id='noticia3' class="td_normal" onMouseOver="cellChange('noticia3');">>
  8.     <td>Noticia3</td>
  9. </tr>
  10. <tr id='noticia4' class="td_normal" onMouseOver="cellChange('noticia4');">>
  11.     <td>Noticia4</td>
  12. </tr>
  13. <tr id='noticia5' class="td_normal" onMouseOver="cellChange('noticia5');">>
  14.     <td>Noticia5</td>
  15. </tr>

Esto esta un poco largo pero al final te dara el resultado que deseas.
PD: espero no haber cometido algun error en el codigo :S jejejejeje
  #15 (permalink)  
Antiguo 23/12/2008, 21:18
 
Fecha de Ingreso: julio-2008
Mensajes: 133
Antigüedad: 9 años, 5 meses
Puntos: 1
Respuesta: Cambiar fondo de celda al onMouseover

Excelente, gracias.

Espera uqe lo pruebo y te digo ya mismo si va o no. ;)
  #16 (permalink)  
Antiguo 23/12/2008, 21:27
 
Fecha de Ingreso: julio-2008
Mensajes: 133
Antigüedad: 9 años, 5 meses
Puntos: 1
Respuesta: Cambiar fondo de celda al onMouseover

Casi casi anda jaja. Mira:

http://www.pinchapasion.net/nueva/index.php

Toma el current, pero no el resto.

Puede que influya que en vez de aplicarlo sobre un TR lo estoy aplicando sobre una TABLA ? o no ?
  #17 (permalink)  
Antiguo 23/12/2008, 21:39
Avatar de f0vela  
Fecha de Ingreso: diciembre-2008
Ubicación: Guatemala
Mensajes: 48
Antigüedad: 9 años
Puntos: 1
Respuesta: Cambiar fondo de celda al onMouseover

Tu codigo esta generando cosas muy extrañas como id's duplicados en tablas, celdas y filas de celdas....

Ahora entre con el firebug y me dio varios errores de javascript.

uno de ellos es document.getElementById(relvalue) is null en

document.getElementById(relvalue).fi...d(relvalue) .getElementsByTagName("a")[0]
dropdowntabs.js (línea 139)

y este error es el que creo que genera esto:

Código html:
Ver original
  1. <tr )="" piel.="" de="" flor="" a="" deseos="" los="" ver="" deja="" y="" 2009="" el="" para="" pretensiones="" sus="" lanz&#225;="" cellay="" duro,="" semestre="" un="" luego="" vacaciones.="" merecidas="" comienzo="" disfruta="" que="" hurac&#225;n="" hombre="" ex="" del="" intimidad="" la="" entr&#243;="" pasi&#243;n="" pincha="" ,="" christian="" campeon="" salir="" es="" todos="" deseo="" onmouseover="seleccionarNoticia('http://www.pinchapasion.net/nueva', '1.jpg', '1', '">
  #18 (permalink)  
Antiguo 23/12/2008, 21:44
 
Fecha de Ingreso: julio-2008
Mensajes: 133
Antigüedad: 9 años, 5 meses
Puntos: 1
Respuesta: Cambiar fondo de celda al onMouseover

El tema es que te explico. Genere un sistema de noticias, que muestra las ultimas 5 noticias a la derecha, y al pasar OnMouseOver, muestra el preview del mismo, lo que hice para hacer el sistema es qmostrar la noticia1, y el resto, con while y un contador, mostra noticia2, noticia3, noticia4, y noticia5.

Ahi arreglo el JS para ver que pasa

QUe error seria ese ? cual es la falla ?


Entonces, por ejemplo, para mostrar la noticia 1 con tu sistema hago:

<table width="100%" border="0" cellpadding="0" cellspacing="0" id="noticia1" class="td_current" onmouseover="cellChange('noticia1');">


Y el bucle de las restantes hago:

<? $i=2;
while($noticia = next($rhe))
{
?>


<table width="100%" border="0" cellpadding="0" cellspacing="0" class="td_normal" id="noticia<?=$i?>" onmousemver="cellChange('noticia<?=$i?>');">
  #19 (permalink)  
Antiguo 23/12/2008, 22:07
 
Fecha de Ingreso: julio-2008
Mensajes: 133
Antigüedad: 9 años, 5 meses
Puntos: 1
Respuesta: Cambiar fondo de celda al onMouseover

Ahi ya se hizo un poco mas complejo no ? jeje.

Igualmente te agradesco por la ayuda viejo ! Muchas gracias ! Quizas alguien pueda redondear el codigo que hicistes
  #20 (permalink)  
Antiguo 24/12/2008, 01:10
Avatar de f0vela  
Fecha de Ingreso: diciembre-2008
Ubicación: Guatemala
Mensajes: 48
Antigüedad: 9 años
Puntos: 1
Respuesta: Cambiar fondo de celda al onMouseover

Esta excelente esto ppnet, el problema es que si hay dos elementos en tu pagina con el mismo ID, el codigo que te pase no funcionará ya que este busca el ID que le envias y si existen dos elementos con ID noticia1 no sabrá a cual te estás refiriendo.
  #21 (permalink)  
Antiguo 24/12/2008, 07:48
 
Fecha de Ingreso: julio-2008
Mensajes: 133
Antigüedad: 9 años, 5 meses
Puntos: 1
Respuesta: Cambiar fondo de celda al onMouseover

Sisi, la idea esta muy bien hecha, mira, aca probe poniendo ID diferentes, y tampoco: http://www.pinchapasion.net/nueva/index2.php

Saludos

QUe podra estar fallando ?

Última edición por ppnet; 24/12/2008 a las 10:22
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 09:35.