No me funciona :active

[fedefrankk]

Hola a todos, tengo 7 botones, cada uno cuenta con dos images, cuando paso el maus por encima se cambia, con "hover", lo que necesito es que al hacer click sobre ese boton se mantenga la imagen de "hover", osea boton activo, me dijieron que use "active". pero no me sale, alguna sugerencia?.

Gracias de antemano y saludos a todos.

Código CSS:

.BYIMAG2{position:absolute;width:95px;height:38px;background-image:url(imag_b/bt1.jpg);background-repeat:no-repeat;left:251px; top:0px}
.BYIMAG2:hover{position:absolute;background:url(imag_b/b1.jpg);cursor:pointer;}
.BYIMAG3{position:absolute;width:88px;height:38px;background-image:url(imag_b/bt2.jpg);background-repeat:no-repeat;left:346px; top:0px}
.BYIMAG3:hover{position:absolute;background:url(imag_b/b2.jpg);cursor:pointer;}
.BYIMAG4{position:absolute;width:86px;height:38px;background-image:url(imag_b/bt3.jpg);background-repeat:no-repeat;left:434px; top:0px}
.BYIMAG4:hover{position:absolute;background:url(imag_b/b3.jpg);cursor:pointer;}
.BYIMAG4:active{position:absolute;background:url(imag_b/b4.jpg));cursor:pointer;}
.BYIMAG5{position:absolute;width:85px;height:38px;background-image:url(imag_b/bt4.jpg);background-repeat:no-repeat;left:520px; top:0px}
.BYIMAG5:hover{position:absolute;background:url(imag_b/b4.jpg);cursor:pointer;}
.BYIMAG5:active{position:absolute;background:url(imag_b/b4.jpg);cursor:pointer;}
.BYIMAG6{position:absolute;width:87px;height:38px;background-image:url(imag_b/bt5.jpg);background-repeat:no-repeat;left:605px; top:0px}
.BYIMAG6:hover{position:absolute;background:url(imag_b/b5.jpg);cursor:pointer;}
.BYIMAG7{position:absolute;width:86px;height:38px;background-image:url(imag_b/bt6.jpg);background-repeat:no-repeat;left:692px; top:0px}
.BYIMAG7:hover{ bposition:absolute;background:url(imag_b/b6.jpg);cursor:pointer;}
.BYIMAG8{position:absolute;width:122px;height:170px;background-image:url(imag_b/bt7.jpg);background-repeat:no-repeat;left:778px; top:0px}
.BYIMAG8:hover{position:absolute;background:url(imag_b/b7.jpg);cursor:pointer;}
 

Fede

[Naahuel]

En tu código sólo veo el active 2 veces. Uno de esos es:

Código CSS:

.BYIMAG5{position:absolute;width:85px;height:38px;background-image:url(imag_b/bt4.jpg);background-repeat:no-repeat;left:520px; top:0px}
.BYIMAG5:hover{position:absolute;background:url(imag_b/b4.jpg);cursor:pointer;}
.BYIMAG5:active{position:absolute;background:url(imag_b/b4.jpg);cursor:pointer;}
 

Y todos tienen el mismo fondo (b4.jpg). Para .BYIMAG4 has hecho algo parecido, sólo es diferente en active.




Te paso uno de los sitios que hice hace poco como ejemplo:
http://www.cofatuc.org.ar/olimpiadas2011/

Si te fijás tenés 3 botones grandes con un estado inicial. Al mover el mouse por encima de ellos, cambia el color del dibujo y al presionarlo da un efecto de hundido. Esto lo logro con esta imagen:



Y con este código CSS:

Código CSS:

#lugares{
    background:url(../images/boton-lugares.png) top left no-repeat;
}
#inscripcion{
    background:url(../images/boton-inscripcion.png) top left no-repeat;
}
#actividades{
    background:url(../images/boton-actividades.png) top left no-repeat;
}
 
#botones a:hover{
    background-position:top center;
}
#botones a:active{
    background-position:top right;
}
 

Diferentes imagenes para cada botón, pero posicionadas en forma diferente para :hover y :active. :active debe estar siempre después de :hover.

No es complicado, revisá tu CSS porque no es correcto lo que estás haciendo.

[fedefrankk]

Hola, Increible tu explicacion y el tiempo tomado, se agradece y mucho.
(Espectacular tu WEB).. yo estoy iniciando..

Las imagenes de mi codigo son distintas, para cada hover, que en realida son dos estados del boton, el boton es claro (imagen.jpg) y cuando pasas el maus actua el hover (imagen1.jpg).
Mi pregunta es: cuando hago click en ese boton, con active o con otra sentencia, se puede hacer que ese boton quede con imagen1.jpg, osea que quede precionado.
Entonces al hacer clic en otro boton el anterior que vuelva a su estado normal y el nuevo precionado que quede precionado.
Se podra hacer eso con CSS?.

Enserrio muchisimas gracias por tu atencion
Saludos
Fede

[Naahuel]

Realmente no estoy seguro si eso puede lograrse sólo con CSS (la verdad no se me ocurre como) pero sí con JavaScript (más precisamente, jQuery).

Para esto es necesario definir clases. Algo como:

Código CSS:

.activo{
       background-image:url(imagen-de-activo.jpg);
}
 

Con jQuery uno puede fácilmente agregar y quitar clases a elementos al dispararse diferentes eventos o lo que sea.

Te recomiendo que fusiones tus imágenes (como yo he hecho) pues si usas una imagen diferente para :hover, digamos, ésta recién cargará al momento de pasar el mouse por encima. Esto es algo indeseado, pues uno verá el botón pero al pasar el mouse por encima va a notarse la carga de la otra imagen.

El método que yo terminé adoptando es crear una imagen con los 3 (o dos) estados que tenga mi botón. Cada estado tiene exactamente las mismas dimensiones (fijate en la imagen de arriba) y con CSS puedo re-posicionar el fondo para :hover y :active. De esta forma sólo se carga una sola imagen y el efecto es prolijo.

Te voy a pasar un ejemplo bien sintetizado de cómo lograrías eso que querés hacer con jQuery, pero dame unos minutos :P (tenés suerte que estoy aburrido).

[fedefrankk]

Hola, disculpa las molestias, y gracias.!!!!

Saludos
Fede

[Naahuel]

Bueno acá está:

http://jsbin.com/axoxu4/4

El botón usa esta imagen para los tres estados:


Si vas al botón "Edit in JS Bin" arriba a la derecha podés ver el código y hacer cambios también.

Este es el html:

Código HTML:

<p><a class="boton" href="#"></a></p>
  <p><a class="boton" href="#"></a></p>
  <p><a class="boton" href="#"></a></p>
 

Este el CSS:

Código CSS:

/*estilo para el boton*/
  .boton{
    display:block;
    width:100px;
    height:50px;
    background: url('http://www.freeimagehosting.net/uploads/c3f1b24bbb.jpg') top center no-repeat;
  }
  /*estilo para el hover*/
  .boton:hover{
    background-position: center center;
  }
  /*estilo para la clase activo y para :active*/
  .activo{
    background-position: bottom center;
  }
 

Acá lo importante: Cuando defino la imagen de fondo, sólo lo hago para el botón al principio, aclarando que su posición debe ser "top center" (la imagen de arriba). Luego, para :hover defino una nueva posición que es "center center" (la del centro) y para el estado activo es "bottom center" (la del fondo).


Y este el código con jQuery:

Código Javascript:

<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<script type="text/javascript">
 $(document).ready(function(){
  //al hacer click en el boton:
  $('.boton').click(function(){
    //quitar la clase .activo al boton que la tenga:
    $('.activo').removeClass('activo');
    //agregar la clase .activo al boton al que hicimos click:
    $(this).addClass('activo');
  });
});
</script>
 

En este caso definir un estilo para :active no tiene mucho sentido. Adaptar ese código a tus necesidades no debería ser complicado.

[fedefrankk]

Buenas, es justo lo que necesitava.!, muuuy agradecido.!!! por tu tiempo y explicacion.
Se agradece en serio.
Saludos
Fede

[Naahuel]

No hay problema :)

Recién veo que me olvidé de poner el estado :active! jaja. Debería ser así:

Código CSS:

/*estilo para la clase activo y para :active*/
  .boton:active, .activo{
    background-position: bottom center;
  }
 

Y acá en JS bin para que notes la diferencia:
http://jsbin.com/axoxu4/5

Fijate como cambia justo cuando hacés click.
Un saludo!