Cambiar fondo de celda al onMouseover

[ppnet]

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

[mediocre]

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.

[trasgukabi]

onmouseover="this.style.bgcolor='#000000'"
onmouseout="this.style.bgcolor='#FFFFFF'"

[ppnet]

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.-

[f0vela]

#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...

[ppnet]

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

[f0vela]

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.

[ppnet]

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

[Triby]

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 }

[trasgukabi]

hablando de otra cosa: las imágenes que pones en las noticias, las optimizarás después, no? hay una de 1.35mb

[f0vela]

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.

[ppnet]

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

[ppnet]

Iniciado por f0vela

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.

[f0vela]

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:

<style>
/* Usaremos clases en lugar de id's */
 
.td_current { background:url(miotraimagendefondo.png); }
.td_normal { background:url(miimagendefondo.png); }
</style>
 

Código javascript:

<script>
// Esta función permite encontrar los elementos dentro de la pagina que tengan una clase determinada
var getElementsByClassName = function (className, tag, elm){
    if (document.getElementsByClassName) {
        getElementsByClassName = function (className, tag, elm) {
            elm = elm || document;
            var elements = elm.getElementsByClassName(className),
                nodeName = (tag)? new RegExp("\\b" + tag + "\\b", "i") : null,
                returnElements = [],
                current;
            for(var i=0, il=elements.length; i<il; i+=1){
                current = elements[i];
                if(!nodeName || nodeName.test(current.nodeName)) {
                    returnElements.push(current);
                }
            }
            return returnElements;
        };
    }
    else if (document.evaluate) {
        getElementsByClassName = function (className, tag, elm) {
            tag = tag || "*";
            elm = elm || document;
            var classes = className.split(" "),
                classesToCheck = "",
                xhtmlNamespace = "http://www.w3.org/1999/xhtml",
                namespaceResolver = (document.documentElement.namespaceURI === xhtmlNamespace)? xhtmlNamespace : null,
                returnElements = [],
                elements,
                node;
            for(var j=0, jl=classes.length; j<jl; j+=1){
                classesToCheck += "[contains(concat(' ', @class, ' '), ' " + classes[j] + " ')]";
            }
            try {
                elements = document.evaluate(".//" + tag + classesToCheck, elm, namespaceResolver, 0, null);
            }
            catch (e) {
                elements = document.evaluate(".//" + tag + classesToCheck, elm, null, 0, null);
            }
            while ((node = elements.iterateNext())) {
                returnElements.push(node);
            }
            return returnElements;
        };
    }
    else {
        getElementsByClassName = function (className, tag, elm) {
            tag = tag || "*";
            elm = elm || document;
            var classes = className.split(" "),
                classesToCheck = [],
                elements = (tag === "*" && elm.all)? elm.all : elm.getElementsByTagName(tag),
                current,
                returnElements = [],
                match;
            for(var k=0, kl=classes.length; k<kl; k+=1){
                classesToCheck.push(new RegExp("(^|\\s)" + classes[k] + "(\\s|$)"));
            }
            for(var l=0, ll=elements.length; l<ll; l+=1){
                current = elements[l];
                match = false;
                for(var m=0, ml=classesToCheck.length; m<ml; m+=1){
                    match = classesToCheck[m].test(current.className);
                    if (!match) {
                        break;
                    }
                }
                if (match) {
                    returnElements.push(current);
                }
            }
            return returnElements;
        };
    }
    return getElementsByClassName(className, tag, elm);
};
 
 
// Esta función es la que cambiará la clase de la celda en la que esta parada
function cellChange(idActual){
    
    // encuentra todos los elementos que tienen td_current como clase y los cambia a td_normal
    var normal = getElementsByClassName('td_current');
    var contador = 0;
    while (normal[contador])
    {
        normal[contador].style.class = 'td_normal';
        contador++;
    }
 
    // al td el id actual le cambia la clase a td_current para que este rojo
    document.getElementById(idActual).style.class = 'td_current';
 
}
</script>
 

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

Código html:

<tr id='noticia1' class="td_current" onMouseOver="cellChange('noticia1');">
    <td>Noticia1</td>
</tr>
<tr id='noticia2' class="td_normal" onMouseOver="cellChange('noticia2');">>
    <td>Noticia2</td>
</tr>
<tr id='noticia3' class="td_normal" onMouseOver="cellChange('noticia3');">>
    <td>Noticia3</td>
</tr>
<tr id='noticia4' class="td_normal" onMouseOver="cellChange('noticia4');">>
    <td>Noticia4</td>
</tr>
<tr id='noticia5' class="td_normal" onMouseOver="cellChange('noticia5');">>
    <td>Noticia5</td>
</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

[ppnet]

Excelente, gracias.

Espera uqe lo pruebo y te digo ya mismo si va o no. ;)

[ppnet]

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 ?

[f0vela]

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:

<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', '">
 

[ppnet]

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?>');">

[ppnet]

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

[f0vela]

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.

[ppnet]

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 ?