Foros del Web » Programando para Internet » Javascript »

Activar botones css con el evento onclick !!

Estas en el tema de Activar botones css con el evento onclick !! en el foro de Javascript en Foros del Web. Hola, espero alguien me pueda echar la mano, con lo siguiente, soy novata en javascript, bueno tengo una lista la cual imprimo desde un recordset, ...
  #1 (permalink)  
Antiguo 09/04/2007, 14:53
 
Fecha de Ingreso: mayo-2006
Mensajes: 215
Antigüedad: 18 años
Puntos: 0
Activar botones css con el evento onclick !!

Hola, espero alguien me pueda echar la mano, con lo siguiente, soy novata en javascript, bueno tengo una lista la cual imprimo desde un recordset, dependiendo d los valores q hay en una base de datos, ok, esta lista, jala una hoja de estilos, y de esta forma se muestra como un menu de botones.

Supongamos que son 6 botones, cuando el usuario da click sobre un boton, se marca en la url, es decir, si el usuario pulsa el boton 1,2 y 3 , en la url, aparece asi menu.php?centrales=1,2,3 , y si el usuario pulsa el boton 2, ahora se borra d la url menu.php?centrales=1,3, algo asi.

El caso es que yo quiero que a los botones (recuerden que son estilos), que el usuario de click, se queden activados, con otro color, o algo asi como "sumidos" , me explico, y si el usuario vuelve a dar click, ke se desactiven, la verdad no se bien como puedo hacerlo, pero supongo ke el poderoso javascript lo permite.

Ayuda masters, alguna idea o sugerencia??
  #2 (permalink)  
Antiguo 09/04/2007, 15:02
 
Fecha de Ingreso: abril-2002
Mensajes: 1.014
Antigüedad: 22 años
Puntos: 8
Re: Activar botones css con el evento onclick !!

... poderoso... xD

A ver si te sirve lo siguiente, lo que hace es comprobar el color de texto actual y cambiarlo por "el otro".

Código:
if( document.getElementById("boton").style.color == "red" )
    document.getElementById("boton").style.color = "black";
else
    document.getElementById("boton").style.color = "red";
De este modo puedes acceder a las demás propiedades también.

Como ves, no hace falta ser un maestro para esto jejeje

Salu2
  #3 (permalink)  
Antiguo 09/04/2007, 17:09
 
Fecha de Ingreso: mayo-2006
Mensajes: 215
Antigüedad: 18 años
Puntos: 0
Re: Activar botones css con el evento onclick !!

Oye pero esa etiqueta de document.getElementById("boton") ....... es para elementos de formulario cierto??

Y esto es una lista ke adkiere estilo desde una hoja d estilos.

Como puedo manipular eso?
Debo modificar la hoja de estilos??
pero para saber ke botones poner en otro color, debo obtenerlos dessde la url, ay la verdad estoy enredada, porfis ayudenme

gracias
  #4 (permalink)  
Antiguo 09/04/2007, 17:17
Avatar de Shiryu_Libra
Colaborador
 
Fecha de Ingreso: febrero-2007
Ubicación: Cantando "Screenager" en "Kirafa Kaput"
Mensajes: 3.614
Antigüedad: 17 años, 2 meses
Puntos: 88
Re: Activar botones css con el evento onclick !!

Cita:
Iniciado por Sugey Ver Mensaje
...cuando el usuario da click sobre un boton, ......
Cita:
Iniciado por MikiBroki Ver Mensaje
...
Código:
if( document.getElementById("boton").style.color == "red" )
    document.getElementById("boton").style.color = "black";
else
    document.getElementById("boton").style.color = "red";
...
el escrito de Mikibroki, te da... él como acceder a esos estilos (CSS), ya solo seria manipular lo que ocupes...

suerte
__________________
"Eres parte del problema, parte de la solucion o parte del paisaje"
Un Saludo desde Desierto de Altar, Sonora, MX.
Shiryu_libra
  #5 (permalink)  
Antiguo 09/04/2007, 22:30
 
Fecha de Ingreso: mayo-2006
Mensajes: 215
Antigüedad: 18 años
Puntos: 0
Re: Activar botones css con el evento onclick !!

mmm perdon por ser tan burra, pero en donde dice (boton) no se como ponerle
porke no es un boton
  #6 (permalink)  
Antiguo 09/04/2007, 22:58
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años
Puntos: 1284
Re: Activar botones css con el evento onclick !!

Hola:

Lo de poner botón, no fue más que darle un nombre... al usar la instrucción document.getElementById("boton") se está refiriendo a cualquier etiqueta que tenga el atributo id con el valor "boton". O sea que el elemento que quieres referenciar debe tener un atributo id con un valor que no puede repetirse en la página (los id's deben ser únicos)

Resumiendo, si se trata de una lista con etiquetas li podría estar definida así:
<li id="item1" ...

... entonces la instrucción sería: document.getElementById("item1")

Lo que no sé si los navegadores leen los estilos de esa manera (creo que explorer "red" lo consideraba como "#FF0000", y netscape/mozilla "rgb(255,0,0), así que tal vez puedas usar otro método como a partir de las clases:
<style type="text/css" >
.normal {background-color: red;}
.resalte {background-color: black;}

Y el cambio podría ser desde la propia etiqueta:
<li onclick="this.className = (this.className == 'normal') ? 'resalte':'normal'">

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #7 (permalink)  
Antiguo 09/04/2007, 23:49
Avatar de Shiryu_Libra
Colaborador
 
Fecha de Ingreso: febrero-2007
Ubicación: Cantando "Screenager" en "Kirafa Kaput"
Mensajes: 3.614
Antigüedad: 17 años, 2 meses
Puntos: 88
Re: Activar botones css con el evento onclick !!

Cita:
Iniciado por Sugey Ver Mensaje
mmm perdon por ser tan burra...
animate, para eso estamos aki, para que puedas resolver tus dudas, ademas considera esto.... cuantas personas donde estas saben lo que tu??.. piensalo

maestro!!
caricatos
otra ves.... sin palabras
__________________
"Eres parte del problema, parte de la solucion o parte del paisaje"
Un Saludo desde Desierto de Altar, Sonora, MX.
Shiryu_libra
  #8 (permalink)  
Antiguo 10/04/2007, 12:11
 
Fecha de Ingreso: mayo-2006
Mensajes: 215
Antigüedad: 18 años
Puntos: 0
Re: Activar botones css con el evento onclick !!

Ok, muchas gracias, miren se me esta dificultando porque este codigo esta en php y tiene etiquetas embebidas de html, pero ya logre encontrar donde imprime el menu, es ke son 3000 mil lineas, es una pagina grande :S

Aqui esta el html, que imprime el menu:

Mientras se cumple una condicion, se imprime un menu:

<form name="form1" method="post" action="">
<div id="menu" border="none">
<br>
<dl><dt>
<A HREF='menu.php? (aqui hay un codigo php, que, dependiendo del boton que se presione o mas bien del enlace, se manda un numero en la url, para saber ke enlaces han sido presionados algo asi)>
// puede quedar asi menu.php?botones=1,2,3 , y si el usuario presiona el boton 3, ahora la url quedra asi menu.php?botones=1,2

Sinaloa
Queretaro
Monterrey
San Luis
</A></dt></dl>
</div>

-------------------------------------------------------------------------
Y esta es la hoja de estilos
<style type="text/css" media="screen">
<!--
dl, dt, dd, ul, li {
margin: 0;
list-style-type: none;
}


#menu {
text-align : center;
position : absolute; /* la posicion puede ser modificada aqui */
color : white;
top : 130/*92*/; /*Es la colocación de los botones en el portal...*/
zleft : 9px;
z-index : 100;
width : 100%; /* precision for Opera */
/*width : 100%; *//* precision for Opera */
}


#menu dl {
float: left;
width: 150px; /*Espacio entre los botones...*/
}


/*Afecta a los botones del menu...*/
#menu dl dt,#menu dl dt a:visited {
/*background-image : url(../menu/img/opcion1.bmp);*/ /*Botones del menu...*/
background-image : url(../menu/img/botonv.png);
width: 150px; /*Tamaño del link... de los botones... la sombra*/
height : 30px;
text-align : center;
color :#FFCC00; /*color de las letras del boton seleccionado...*/
font-weight:bolder;
font-size:10px;
}




#menu dt {
cursor: pointer;
text-align: center;
font-weight: normal;
color : white;
border: 0px solid black;
margin: 1px; /*Margen entre los botones (no del menu emergente)*/
height : 15px;
padding: 0px;

}

#menu dd {
display: none;
border: 1px solid gray; /*borde externo de las opciones*/
padding: 5px; /*Separacion de la opcion con el borde*/
height : 20px;
font-weight: normal;
background:white; /*fondo necesario para los botones del menu emergente*/


}


#menu li {
text-align: left;
border : 1px solid rgb(192,192,192); /*borde interno de las opciones*/
margin: 5px;
padding: 0px; /*Separacion de la opcion con el borde*/
height : 20px;
}

/*Afecta a los botones del menu de las centrales....*/
#menu li a, #menu dt a {
color: #ffffff;/*#003300; */ /* Letras del menu en negro para seleccionar */
text-decoration: none;
text-align:center;
display:block; /*Afecta el tamaño del letrero del boton...*/
height: 100%;
border : 0px ;
background:#4e9c4e;/*#4e9c4e;*//*#468C46; */ /*color de fondo de las opciones se coloca blanco primero*/

}

/*Afecta a los botones, en cuestión del fondo...*/
#menu dt a:hover, #menu dt a:focus , #menu dt a:visited
{
background : none; /* color para seleccion (Gris tenue)*/
color : #003300;/*verde/Amarillo*//*#003300;*//* #006633; */ /*rgb(0,0,255); */ /* Letras cuando se seleccionan*/
font-weight:bolder;
}
#menu li a:hover, #menu li a:focus,
{
background : rgb(242,242,242); /* color para seleccion (Gris tenue)*/
color : rgb(0,0,255); /* Letras cuando se seleccionan*/
font-weight: normal;
}

</style>

-------------------------------------------------------------------------
Ahora si, partiendo de esto, debo hacer q los botones se queden activados con un color diferente o sumidos. Si el usuario presiono tres botones, esos tres aparecen en la url menu.php?botones=1,2,3 y esos tres deben verse de otro color, y si el usuario presiona el boton 3 ahora la url estara asi menu.php?botones=1,2 y deben estar esos dos botones de otro color.

Me explique, trato de ser bien clara, la verdad si me costo entenderle a este codigo, porke estaba embebido en el php de 3000 mil lineas,
ahora si, please echenme la mano

Gracias por todo, estoy bien atenta a sus comentarios, seguire investigando
  #9 (permalink)  
Antiguo 10/04/2007, 12:35
Avatar de MaBoRaK  
Fecha de Ingreso: abril-2003
Ubicación: La Paz - Bolivia
Mensajes: 2.003
Antigüedad: 21 años
Puntos: 35
Re: Activar botones css con el evento onclick !!

loading............


Por lo menos tenias coloreado de sintaxis :p
asi que dejalo fácil para nosotros PONLO ENTRE ETIQUETAS PHP o HTML!!!!

connection closed.
__________________

Maborak Technologies
  #10 (permalink)  
Antiguo 10/04/2007, 14:37
Avatar de Shiryu_Libra
Colaborador
 
Fecha de Ingreso: febrero-2007
Ubicación: Cantando "Screenager" en "Kirafa Kaput"
Mensajes: 3.614
Antigüedad: 17 años, 2 meses
Puntos: 88
Re: Activar botones css con el evento onclick !!

por que no escribes un link de tu pagina de prueba, para ver como queda en forma visual

se me afigura que se pudiera incorporar una linea.. como esta...
border-color:#00FF00;

al visitar ese boton dentro de tu STYLE

no creen???
__________________
"Eres parte del problema, parte de la solucion o parte del paisaje"
Un Saludo desde Desierto de Altar, Sonora, MX.
Shiryu_libra
  #11 (permalink)  
Antiguo 10/04/2007, 17:40
 
Fecha de Ingreso: mayo-2006
Mensajes: 215
Antigüedad: 18 años
Puntos: 0
Re: Activar botones css con el evento onclick !!

No puedo, estoy en una intranet.
  #12 (permalink)  
Antiguo 11/04/2007, 11:22
 
Fecha de Ingreso: mayo-2006
Mensajes: 215
Antigüedad: 18 años
Puntos: 0
Re: Activar botones css con el evento onclick !!

no hay sugerencias?
  #13 (permalink)  
Antiguo 11/04/2007, 11:28
 
Fecha de Ingreso: mayo-2006
Mensajes: 215
Antigüedad: 18 años
Puntos: 0
Re: Activar botones css con el evento onclick !!

estoy en una intranet, se podran conectar para ver la pagina??

ke hago?
  #14 (permalink)  
Antiguo 11/04/2007, 11:53
 
Fecha de Ingreso: mayo-2006
Mensajes: 215
Antigüedad: 18 años
Puntos: 0
Re: Activar botones css con el evento onclick !!

Miren, se supone q con esto en la hoja de estilos, ya deberia kedar de otro color, cuando se presione ?? y no es asi, ke puedo hacer?


#menu dt a:hover, #menu dt a:focus , #menu dt a:visited
{
background : none; /* color para seleccion (Gris tenue)*/
color : #003300;/*verde/Amarillo*//*#003300;*//* #006633; */ /*rgb(0,0,255); */ /* Letras cuando se seleccionan*/
font-weight:bolder;
}
  #15 (permalink)  
Antiguo 11/04/2007, 12:02
Avatar de Shiryu_Libra
Colaborador
 
Fecha de Ingreso: febrero-2007
Ubicación: Cantando "Screenager" en "Kirafa Kaput"
Mensajes: 3.614
Antigüedad: 17 años, 2 meses
Puntos: 88
Re: Activar botones css con el evento onclick !!

es que es diferente, si pones on HOVER o FOCUS, es cual pasas el mouse sobre tu boton... el visited es cuando presionas ese enlace
pero creo que lo pudieras manejar por separado, pudieras tener el error ahi

has un intento
__________________
"Eres parte del problema, parte de la solucion o parte del paisaje"
Un Saludo desde Desierto de Altar, Sonora, MX.
Shiryu_libra
  #16 (permalink)  
Antiguo 11/04/2007, 12:07
 
Fecha de Ingreso: mayo-2006
Mensajes: 215
Antigüedad: 18 años
Puntos: 0
Re: Activar botones css con el evento onclick !!

Mira lo mismo pense, ya los separe:
/*Afecta a los botones, en cuestión del fondo...*/
#menu dt a:hover /*, #menu dt a:focus , #menu dt a:visited */
{
background : none; /* color para seleccion (Gris tenue)*/
color : none; /*#003300;/*verde/Amarillo*//*#003300;*//* #006633; */ /*rgb(0,0,255); */ /* Letras cuando se seleccionan*/
font-weight:bolder;
}

#menu dt a:focus
{
background-color:#FF0000;
}

#menu dt a:visited
{
background-color:#CC3300;
}

Pero no funciona, cuando doy click, ni si kiera se keda con otro color, :(


Mira el menu:
<form name="form1" method="post" action="">
<div id="menu" border="none">
<br>
<dl><dt>
<A HREF='menu.php?>
Sinaloa
Queretaro
Monterrey
San Luis
</A></dt></dl>
</div>

tambien debo cambiar el dt??
  #17 (permalink)  
Antiguo 11/04/2007, 12:07
 
Fecha de Ingreso: mayo-2006
Mensajes: 215
Antigüedad: 18 años
Puntos: 0
Re: Activar botones css con el evento onclick !!

perdon el dl ?
  #18 (permalink)  
Antiguo 11/04/2007, 12:09
 
Fecha de Ingreso: mayo-2006
Mensajes: 215
Antigüedad: 18 años
Puntos: 0
Re: Activar botones css con el evento onclick !!

Mira, esto es del dl
#menu dl {
float: left;
width: 150px; /*Espacio entre los botones...*/
}


/*Afecta a los botones del menu...*/
#menu dl dt,#menu dl dt a:visited {
/*background-image : url(../menu/img/opcion1.bmp);*/ /*Botones del menu...*/
background-image : url(../menu/img/botonv.png);
width: 150px; /*Tamaño del link... de los botones... la sombra*/
height : 30px;
text-align : center;
color :#FFCC00; /*color de las letras del boton seleccionado...*/
font-weight:bolder;
font-size:10px;
}

no funciona, segun las letras deben cambiar su color, pero no, no funciona
  #19 (permalink)  
Antiguo 11/04/2007, 12:11
 
Fecha de Ingreso: mayo-2006
Mensajes: 215
Antigüedad: 18 años
Puntos: 0
Re: Activar botones css con el evento onclick !!

Mira le cmbie la etiketa backgroun-color, y puse un rojo

#menu dl dt,#menu dl dt a:visited {
background-color:#FF33CC;
width: 150px; /*Tamaño del link... de los botones... la sombra*/
height : 30px;
text-align : center;
color :#FFCC00; /*color de las letras del boton seleccionado...*/
font-weight:bolder;
font-size:10px;
}

Y lo ke haces, es ke cuando paso el moouse por los botones ,cambian d color, pero yo kiero ke cambie cuando de click, y asi se kede.. hasta ke vuelva a clickear
  #20 (permalink)  
Antiguo 11/04/2007, 12:15
Avatar de Shiryu_Libra
Colaborador
 
Fecha de Ingreso: febrero-2007
Ubicación: Cantando "Screenager" en "Kirafa Kaput"
Mensajes: 3.614
Antigüedad: 17 años, 2 meses
Puntos: 88
Re: Activar botones css con el evento onclick !!

dejame intentar recrear tu codigo en mi pc....
__________________
"Eres parte del problema, parte de la solucion o parte del paisaje"
Un Saludo desde Desierto de Altar, Sonora, MX.
Shiryu_libra
  #21 (permalink)  
Antiguo 11/04/2007, 12:18
 
Fecha de Ingreso: mayo-2006
Mensajes: 215
Antigüedad: 18 años
Puntos: 0
Re: Activar botones css con el evento onclick !!

Mira encontre que cuando haces click sobre un boton, las hojas de estilo utilizan esta propiedad:

#menu dl dt,#menu dl dt a:active{
background-color:#CCFF99;
}

pero sabes ke?
ahora cuando doy click, cambia el color, pero enseguida regresa al color ke tenia originalmente :S, y yo kiero ke se kede asi con ese color, hasta ke vuelva a clickear, me explico ?
  #22 (permalink)  
Antiguo 11/04/2007, 12:22
 
Fecha de Ingreso: abril-2002
Mensajes: 1.014
Antigüedad: 22 años
Puntos: 8
Re: Activar botones css con el evento onclick !!

Vamos a ver si con esto se te soluciona: prueba a crear dos estilos o renombra los que tienes, uno para si el botón está activado y el otro para si no lo está.

Código:
.boton_activado {
color:red;
background-color:white;
}

.boton_desactivado {
color:white;
background-color:black;
}
y luego al crear el botón, si está activado:
document.getElementById("idDelBoton").className = "boton_activado";

o si no:
document.getElementById("idDelBoton").className = "boton_desactivado";

De todos modos me da que te han dejado muy vendido con el tema en la empresa...
  #23 (permalink)  
Antiguo 11/04/2007, 12:30
 
Fecha de Ingreso: mayo-2006
Mensajes: 215
Antigüedad: 18 años
Puntos: 0
Re: Activar botones css con el evento onclick !!

eso de document..... lo pongo en un if vdd ??

de javascript , cierto?

sorry, :(
  #24 (permalink)  
Antiguo 11/04/2007, 12:40
Avatar de Shiryu_Libra
Colaborador
 
Fecha de Ingreso: febrero-2007
Ubicación: Cantando "Screenager" en "Kirafa Kaput"
Mensajes: 3.614
Antigüedad: 17 años, 2 meses
Puntos: 88
Re: Activar botones css con el evento onclick !!

mikibroki (hola), y sugey.... no han mirado que repites en tu CSS.

dt, dd, li...
creo que habra que reestructurar el CSS

razones:
primero inicializas los valores conjuntamente
despues por grupos
los envuelves singularmente
y los vuelves a concatenar

no crees?
__________________
"Eres parte del problema, parte de la solucion o parte del paisaje"
Un Saludo desde Desierto de Altar, Sonora, MX.
Shiryu_libra
  #25 (permalink)  
Antiguo 11/04/2007, 14:38
 
Fecha de Ingreso: mayo-2006
Mensajes: 215
Antigüedad: 18 años
Puntos: 0
Re: Activar botones css con el evento onclick !!

Perdon, pero no entiendo, no funcionria si pongo algo en el evento onclick ?

asi como me dicen, mas arriba, o no?
  #26 (permalink)  
Antiguo 11/04/2007, 14:45
Avatar de Shiryu_Libra
Colaborador
 
Fecha de Ingreso: febrero-2007
Ubicación: Cantando "Screenager" en "Kirafa Kaput"
Mensajes: 3.614
Antigüedad: 17 años, 2 meses
Puntos: 88
Re: Activar botones css con el evento onclick !!

lo que pasa sugey, es que se podria implementar la funcion que se te dio al principio... pero tu CSS, rije que al dar click sobre tus enlaces, se coloree...

e incluso si le diera actualizar, el color no se quita....

como ves???
__________________
"Eres parte del problema, parte de la solucion o parte del paisaje"
Un Saludo desde Desierto de Altar, Sonora, MX.
Shiryu_libra
  #27 (permalink)  
Antiguo 11/04/2007, 14:47
 
Fecha de Ingreso: mayo-2006
Mensajes: 215
Antigüedad: 18 años
Puntos: 0
Re: Activar botones css con el evento onclick !!

oigan
miren ayudenme con la sintaxis, sera asi?
function botones()
{

if document.getElementById("menu").className = "boton_activado";
else
document.getElementById("menu").className = "boton_desactivado";
}

y luego en el menu html:

<form name="form1" method="post" action="">
<div id="menu" border="none">
<br>
<dl><dt>
<A HREF='menu.php? onclick='botones()'>
Sinaloa
Queretaro
Monterrey
San Luis
</A></dt></dl>
</div>

ayudenme con la sintaxis por fa !
  #28 (permalink)  
Antiguo 11/04/2007, 15:12
Avatar de Shiryu_Libra
Colaborador
 
Fecha de Ingreso: febrero-2007
Ubicación: Cantando "Screenager" en "Kirafa Kaput"
Mensajes: 3.614
Antigüedad: 17 años, 2 meses
Puntos: 88
Re: Activar botones css con el evento onclick !!

sugey...
intente modificar tu style.... elimine todo y solo deje estas lineas mira
Cita:
#menu a:visited
{
color: #FF0000;
/*font-size:30px;*/
font-style:italic;
}
#menu dt a:hover, #menu dt a:focus
{
color:blue;
font-size:12px;
}
y tu formulario el que escribiste....
Cita:
<div id="menu">
<br>
<dl>
<dt><a href="#">uno</a></dt>
<dt><a href="#">uno</a></dt>
<dt><a href="#">uno</a></dt>
</dl>
</div>
espero me aproxime a lo que realmente ocupas

cambia los enlaces de color e incluso de tamaño, una ves dado click sobre ellos mantiene el color designado por VISITED

suerte
__________________
"Eres parte del problema, parte de la solucion o parte del paisaje"
Un Saludo desde Desierto de Altar, Sonora, MX.
Shiryu_libra

Última edición por Shiryu_Libra; 11/04/2007 a las 15:13 Razón: anexando comentarios
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 08:29.