cambiar color fondo div al hacer clic en uno u otro (sin resolver)

[ludovico2000]

Hola gente:

Tengo un problemilla con una función relativamente sencilla; la uso en un menú para que al pasar el ratón se "iluminen" los divs que hacen de botones. El problema es que quiero que al clicarse, se quede iluminado. Y sí que se ilumina, pero al sacar el mouse del div, ejecuta la parte "onmouseout" se vuelve a apagar... ¿cómo podría hacer que al hacer clic en un div le deje cambiado el color de fondo y más aún, que al clicar en otro, apague el primero y encienda el siguiente?

Pongo aqui las funciones tal cual las tengo ahora:

Código:

function mano(cual){
document.body.style.cursor='hand';
cual.style.backgroundColor='e5e7FF';
};

function flecha(cual){
document.body.style.cursor='default';
cual.style.backgroundColor='#9597FF';
};

function abrir(pag,e){
  elemento = document.getElementById(e);
  elemento.style.backgroundColor = 'red';
parent.mostrador.location.href=pag;
};

Y en el div:

Código:

    <div id="portada" align="left" STYLE="position:absolute;left:0px;top:0px; background:#9597FF;width:250px;height:50px"  name="portada" OnMouseOver="mano(this)" onmouseout="flecha(this)" onclick="abrir('portada.htm','portada')" title="Volver a la Portada">

gracias por vuestro tiempo

P.S.: ah, y ya sé que podría hacerlo con diferentes menús (uno para cada apartado) pero... hay que ponerse a prueba para crecer, ¿no?

Es el menú de: ludovico2000.galeon.com, por si necesitáis más info

[JavierB]

Hola ludovico2000

Puedes crearte una variable global para almacenar el div en el que has hecho click y en la funcion que llamas con onmouseout comprobar si ese era el div que estaba seleccionado:

Código PHP:

  var pepe=null; //***
function mano(cual){
document.body.style.cursor='hand';
cual.style.backgroundColor='e5e7FF';
};

function flecha(cual){
document.body.style.cursor='default';
if (cual==pepe) return; //***
cual.style.backgroundColor='#9597FF';
};

function abrir(pag,e){
  elemento = document.getElementById(e);
  pepe = elemento; //***
  elemento.style.backgroundColor = 'red';
  parent.mostrador.location.href=pag;
};  
   

Saludos,

[ludovico2000]

Bueeeno, mayormente funciona, peero... hace una cosa muy rara:

Al hacer clic, se apaga, al salir y volver a entrar, se enciende y se queda encendido, y al clicar en otro, hay que volver a entrar y salir en el primero para que se apague (está ya puesto y lo puedes ver en la web ludovico2000.galeon.com

Mea culpa en parte: había puesto mal el color... y ahora el único problema es que cuando pinchas en otro, el primero se queda encendido hasta que entras y sales sobre él.

[Cap.Buscapina]

si JavierB me permite (y si no ya lo publiqué ) cambiaré algunas linea para que te solucione ese problema:

function flecha(cual){
document.body.style.cursor='default';
cual.style.backgroundColor=(cual==pepe)?'red':'#95 97FF';
}

function abrir(pag,e){
elemento = document.getElementById(e);
if (pepe){pepe.style.backgroundColor='#9597FF';}
pepe = elemento; //***
elemento.style.backgroundColor = 'red';
parent.mostrador.location.href=pag;
}

espero que te sirva.

saludos

[ludovico2000]

Ole, ole y ole!

Muchas gracias JavierB y CapBuscapina, ahora funciona perfectamente ¡¡ maestros !!

[kinyiro_360]

ola veo q el tema tiene algo de tiempo pero quisiera saber si me puedes explicar +- el codigo lo q pasa q tengo el mismo problema y pero casi no se mucho de javascript

¿en q eventos mandas a llamar las funciones?

espero q alguien me pueda responder de antemano muchas gracias

[JavierB]

Hola kinyiro_360

Te recuerdo el aviso que había al final de este tema y que parece que no has leído o no le has hecho ni caso.



Tema cerrado.