Botones que se queden apretados

fedefrankk · #1 (**permalink**) 27/03/2011, 23:46

Hola a todos, quiero hacer un menu sencillo. por ejemplo.

Inicio:
Portada:
Nose
Hola

Lo que necesito con Css que cuando paso el maus se subrayen, y cuando hago click sobre ese boton, que se quede en negrita,
Actualmente lo hago con 3 dibujos por cada boton y un monton de codigo JavaScript.
Existe alguna manera?.
Saludos y muchas gracias
Fede

Naahuel · #2 (**permalink**) 27/03/2011, 23:53

Ya te he respondido una pregunta prácticamente idéntica:
http://www.forosdelweb.com/f53/no-funciona-active-895695/

fedefrankk · #3 (**permalink**) 28/03/2011, 00:08

Hola, si y lo he utilizado, anda de 10, y te super agradexco por el codigo de ejemplo que dejaste.

Lo que no se hacer, es hacerlo con puro texto y no con imagen en una parte de tu codigo pones :

Código CSS:

Ver originalbackground: url('http://www.freeimagehosting.net/uploads/c3f1b24bbb.jpg') to

Como puedo hacerlo sin imagenes?..
Gracias por tu Interes.!
Saludos
Fede

caricatos · #4 (**permalink**) 28/03/2011, 00:20

Hola:

Lo más parecido que conozco es el borde tipo inset (outset para estado normal)

Saludos

daPhyre · #5 (**permalink**) 28/03/2011, 01:17

¿Que es lo que quieres? El subrayado es con text-decoration:underline y la negrita es con font-weight:bold.

Suerte

fedefrankk · #6 (**permalink**) 28/03/2011, 01:26

Hola lo que necesito no se si se puede hacer.

1 paso el maus por el texto (no dibujo), y se subraye, eso bien
2 que se ponga en negrita el texto (no dibujo), bien con active lo se gracias a "caricatos",

3 Cuando preciono un boton esté, se puede quedar precionado en negrita y subrrayado, y caundo preciono otro boton, que se salga el subrayado y negrita del anterior y se ponga en el nuevo clikeado?.

Eso sería todo, es como dejar precionado el boton y si preciono otro este se despreciona y otro queda precionado.

Le agradezco el tiempo de ustedes,

Gracias
Saludos
Fede

Moncholo · #7 (**permalink**) 28/03/2011, 10:27

seria algo asi

Código CSS:

Ver original/*este es para que se subrayen*/
#boton:hover{
text-decoration: underline;
}
/* este es para cuando lo apachurres xD*/
#boton:active {
/* aca lo que quieres que cambie el color que se yo*/
}
#boton:select {
/* aqui cuando este seleccionado */
}

espero y te sirva

daPhyre · #8 (**permalink**) 28/03/2011, 13:48

¿Estás usando AJAX? Por que si no, al cambiar de página, se carga una totalmente nueva, así que se borran los estilos "generados". Lo que deberías hacer, es crear una clase con el estilo que quieras que tenga el "botón presionado", y asignar esa clase al botón que represente al "actual".

Suerte

fedefrankk · #9 (**permalink**) 28/03/2011, 14:33

Buenas, no funcino, o algo estoy haciendo mal.. dejo codigo y se agradece los ejemplo y el tiempo tomado por ustedes.

Código CSS:

Ver original.tex2{
line-height:26px;
font-family:"Century Gothic", "Century Schoolbook", "Century Schoolbook SWA","Arial";
font-size:14px;
list-style:none;
text-align:justify;
position: absolute;
width: 655px;
height: 169px;
left: 263px;
top: 345px;}
 
.boton{text-decoration:none
}
    
.boton:hover{
    text-decoration:underline;
}
 
.boton:active {
    text-decoration:underline;
}
.boton:select {
    font-weight:bold;
    text-decoration:underline;
}

codigo html

Código HTML:

Ver original<body>
  
               <div class="tex2" id="nu6" > <!--FEDE NUT2 -->
                <li><span onclick="uno('u')" class="boton" id="a1">UNO</span></li>
                <li><span onclick="uno('d')"class="boton" id="a2">DOS</span></li>
                <li><span onclick="uno('t')"class="boton" id="a3">TRES</span></li>
                
                </div>
 
 
 
 
</body>
</html>

Si alguien tiene algun aporte sera agradecido.!!

Saludos a todos
fede

fedefrankk · #10 (**permalink**) 28/03/2011, 14:39

Hola,
LO que hago es lo siguiente:

Por cada boton creo 3 imagenes, uso en css hover, la primer imagen se ve y paso el maus y muestra el hover,
cada boton esta dentro de un div.

por cada boton pongo este codigo para que el boton se quede en negrita.

Código Javascript:

Ver originalfunction acne(ac){
var bot1=document.getElementById('b1_1');
var bot2=document.getElementById('b1_2');
var bot3=document.getElementById('b1_3');
var bot4=document.getElementById('b1_4');
var bot5=document.getElementById('b1_5');
var bot6=document.getElementById('b1_6');
bot1.style.display='none'; // escondo el boton //
bot2.style.display='none';
bot3.style.display='none';
bot4.style.display='block'; // muestro boton en negrita // 
bot5.style.display='none';
bot6.style.display='none';
}

Realmente es un embole... tanto codigo por boton....

Saludos
Gracias.!!!

daPhyre · #11 (**permalink**) 28/03/2011, 14:49

Podrías hacerlo en un array y manejarlo con un for, pero si, creo que es la mejor solución al problema...

fedefrankk · #12 (**permalink**) 28/03/2011, 15:22

Hola, algo de array se, lo que no se hacer, es en los div?.. ya que cada uno tiene una pocision distinta, o podra hacer un array en java..

Código Javascript:

Ver originalvar i 
for (i=0;i<=6;i++) { 
    document.write(i)
    document.write("<br>") 
 
function acne(ac){
var bot1=document.getElementById('b1_1');
var bot2=document.getElementById('b1_2');
var bot3=document.getElementById('b1_3');
var bot4=document.getElementById('b1_4');
var bot5=document.getElementById('b1_5');
var bot6=document.getElementById('b1_6');
bot1.style.display='none'; // escondo el boton //
}
}

Como hago para poner el array en esa funcion?

Código Javascript:

Ver originalvar bot1=document.getElementById('b1_i');--?

saludos
Gracias
Fede

daPhyre · #13 (**permalink**) 28/03/2011, 15:31

Prueba así:

Código:

var bot={document.getElementById('b1_1'), document.getElementById('b1_2'),
document.getElementById('b1_3'), ...};

Y ya accedes a ellos en un for con

Código:

bot[i].style.display='none';

fedefrankk · #14 (**permalink**) 28/03/2011, 15:45

Buenas, lo pruebo y te comento.. Muchas gracias por la info..

Se agradece.!!
Saludos
Fede