Botones con mouseover mouseout y onclick

alexnob · #1 (**permalink**) 08/03/2012, 16:10

Hola gente, aca vengo con mi primer duda...

Actualmente estoy desarrollando un sitio web puse los botones de un menu con "imagen de transicion" en el dreamweaver cs5.5 pero sin obtener los resultados que deseo, ya que tengo la linda "animacion" de que con el mouseover y el mouseout me cambie de color el boton, pero al clickearlo deseo que quede del mismo color que cuando esta con mouseover...y, obviamente, no se como hacer esto y por eso es que pido ayuda...

Recuerden que estoy utilizando imagenes, por lo tanto busco alguna funcion para que al clickear el boton me cargue la misma imagen que con el mouseover.

Ademas de todo esto, tambien es algo fundamental que al clickear en otro boton, todos los botones vuelvan a su estado original (mouseout) excepto el clickeado que debera cambiar a la imagen en su estado mouseover.

Bueno, espero haber sido claro, desde ya muchas gracias!

Naahuel · #2 (**permalink**) 08/03/2012, 17:52

Absolutamente todo eso se puede lograr con CSS.

Código HTML:

Ver original<!doctype html>
<html>
<head>
    <title>Test</title>
    <style type="text/css">
    <!--
        .boton{
            background:red;
        }
        .boton:hover{
            background:blue;
        }
        .boton:active{
            background:green;
        }
    -->
    </style>
</head>
<body>
    <a href="#" class="boton">Click ac&aacute;</a>
</body>
</html>

No importa si usás imágenes o colores sólidos o lo que sea.

Con imágenes necesitás en realidad crear una imagen sola con todos los estados (normal, hover y active) y en cada estado la "movés" usando background-position. Acá hay una especie de tutorial, que no me gustó mucho pero tal vez te sirva: http://www.tekoestudio.com/como-crea...n-css-sprites/

Ignorá la parte del diseño del botón, sólo te interesaría saber cómo hacer la técnica con CSS.

alexnob · #3 (**permalink**) 09/03/2012, 06:56

Hola, muchas gracias por la respuesta. Vi el tutorial pero en verdad no veo la parte del codigo en donde se "mueve" el boton para que cambie de color...si me podes dar una mano con eso te estaria muy agradecido!

Ah, otra cosa. Probe el codigo que pusiste y a pesar de que cambia de color al darle click no es lo que yo busco...ya que no queda "trabado" en el color al clickearlo, solo se pasa a verde mientras estas haciendo el click, cuando lo soltas se va al color del mouseover/mouseout.

Naahuel · #4 (**permalink**) 09/03/2012, 07:07

Entonces no entiendo muy bien lo que querés...

Mirá, este es un sitio algo viejo que hice, observá el comportamiento de los botones: www.cofatuc.org.ar/olimpiadas2011/

¿Algo así?

alexnob · #5 (**permalink**) 09/03/2012, 08:09

te explico bien de que es la web, por ahi te ayuda a entenderme...

Los botones son diferentes marcas de perfumes, como kenzo, carolina herrera, etc... Que, al presionarlos, cargan los perfumes de esa marca que presionaste, es decir, si apretas kenzo, debajo te carga todos los perfumes pertenecientes a la marca kenzo, y asi lo mismo con todas las otras marcas.
Hasta ahora, los logos de las marcas de los perfumes estan en color gris, y al pasar el mouse por encima se colorean en azul. Lo que estoy buscando es que al clickear en alguna marca, ese logo que clickean quede en azul hasta que clickeen en otra marca, ahi es cuando se tiene que poner en azul la nueva marca clickeada, y la marca anterior volver a gris.

Me explico ?

Naahuel · #6 (**permalink**) 09/03/2012, 08:43

Entiendo.

Bueno te puedo mostrar un ejemplo sencillo. Está hecho con jQuery porque hace que muchas tareas (como animar y quitar y agregar clases) sea muy sencillo de nuestra parte:

Código HTML:

Ver original<!doctype html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function(){
            //variables de configuración
            var opacidad_inicial = 0.4;
            var opacidad_final   = 1;
            var clase_activo = 'boton-activo';
            var clase_boton = 'boton';
            
            
            //obtenemos los botones
            var botones = $('.' + clase_boton);
            //apliamos estilos iniciales
            botones.css({
                opacity:opacidad_inicial
            });
            //animación al pasar el mouse
            botones
                .mouseenter(function(){
                    $(this).not('.' + clase_activo).stop().animate({
                        //incluir estilos
                        opacity:opacidad_final
                    });
                })
                .mouseleave(function(){
                    $(this).not('.' + clase_activo).stop().animate({
                        //incluir estilos
                        opacity:opacidad_inicial
                    });
                });
            //agregar clase activa si se hace click
            botones.click(function(){
                botones.not(this).removeClass(clase_activo).trigger('mouseleave');
                $(this).addClass(clase_activo)
            });
        });
    </script>
    <style type="text/css">
    <!--
        .boton{
            /* Estilos comunes para TODOS los botones */
            display:block;
            float:left;
            width:200px;
            height:200px;
            text-indent:-3333px; /*ocultar el texto*/
        }
        /* Estilos para cada boton*/
        #boton-axe{ background:url(http://www.thescentfactoryonline.com/yahoo_site_admin/assets/images/axe_unlimited.68181717.jpg); }
        #boton-rexona{ background:url(http://www.informabtl.com/wp-content/uploads/2011/07/Imagen-REXONA-FINAL1.jpg); }
        #boton-rexona-cd{ background:url(http://babyccinoblog.com/wp-content/uploads/2008/04/rexona2.jpg); }
        /* estilos para el boton activo */
        .boton-activo{
            
        }
    -->
    </style>
</head>
<body>
    <!-- el boton es un link con el texto axe unlimited, el cual ocultamos y ponemos una imagen -->
    <a class="boton" id="boton-axe" href="#">Axe Unlimited</a>  
    <a class="boton" id="boton-rexona" href="#">Rexona Men</a>
    <a class="boton" id="boton-rexona-cd" href="#">Rexona Cotton dry</a>
</body>
</html>

Lai dea es tener un enmarcado válido, fijate que el HTML es sencillo y correcto (excepto que los links no llevan a ningún lado, pero deberían).

Cada <a> tiene una clase (boton) y un id que lo identifica como único para poder asignarle la imagen con CSS.

Respecto al script, hace lo siguiente:

Obtiene algunas variables que vos configurarías, como ser opacidad, clases, etc. La clase para la variable clase_activo es la que definiría los estilos e identificaría cual botón es el activo ahora.
Aplica el estilo inicial que tendrían todos los botones
Asigna un evento para que al pasar el mouse, se aplica una opacidad y al sacarlo se aplique otra.
Asigna una función al evento 'click', que lo que hace es quitarle la clase activa a todos los botones menos al que se le hizo click y disparar el evento 'mouseleave' para que se realice la animación (Hacé la prueba, hacé click en un botón y después en otro. Vas a ver que el primer botón pierde la opacidad con una animación, como si sacaras el mouse de él).
Luego le asigna la clase activa al botón que clickeaste.

Entonces la idea es esa. Basate en ese script para hacer lo tuyo, tal vez no varíe demasiado.

Usá los métodos addClass() y removeClass() para agregar y quitar clases, las cuales tendrían estilos asignados en el CSS

Espero se entienda :P

alexnob · #7 (**permalink**) 09/03/2012, 12:44

Te agradezco muchicisimo el interes nahuel, no mire mucho el codigo ya que me estoy yendo pero te pregunto, es posible sustituir el efecto que hace de opacidad, por la carga de diferentes imagenes? Es decir, en ves de que se aclare y oscurezca, que cargue una imagen de origen y despues otra para el mouse over (y que quede con esa si se clickea)?

Naahuel · #8 (**permalink**) 09/03/2012, 14:08

Eso es lo que muestra el tutorial que te pasé. Te voy a explicar de nuevo.

Mirá este ejemplo:

Código HTML:

Ver original<!doctype html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function(){
            //variables de configuración
            var clase_activo = 'boton-activo';
            var clase_boton = 'boton';          
            
            //obtenemos los botones
            var botones = $('.' + clase_boton);
            
            //agregar clase activa si se hace click
            botones.click(function(){
                botones.not(this).removeClass(clase_activo);
                $(this).addClass(clase_activo)
            });
        });
    </script>
    <style type="text/css">
    <!--
        .boton{
            /* Estilos comunes para TODOS los botones */
            display:block;
            float:left;
            width:88px;
            height:198px;
            text-indent:-3333px; /*ocultar el texto*/
            background-position:right; /* ubicar la imagen de fondo hacia la derecha */
        }
        /* estilos para cada boton */
        #boton-axe{
            background-image:url('http://nahueljose.com.ar/upload/uploads/axe.jpg');            
        }
        /* estilos para el boton activo y para el hover */
        .boton:hover, .boton-activo{
            background-position:left; /* ubicar la imagen de fondo hacia la izquierda */
        }
    -->
    </style>
</head>
<body>
    <!-- el boton es un link con el texto axe unlimited, el cual ocultamos y ponemos una imagen -->
    <a class="boton" id="boton-axe" href="#">Axe Unlimited</a>
</body>
</html>

La primera parte se puede lograr sólo con CSS. Lo que necesitás es crear una imagen sprite. Es decir, una imagen de tu boton con todos los estados. Ejemplo:

Entonces, en este ejemplo, cada parte tiene 98px por 198px. Creás un elemento y le asignás esas dimensiones (en este caso) y ubicás el fondo hacia un lado (usando background-position).

Vos querés que cuando se pase el mouse cambie de color o de estado. Entonces lo que tenés que hacer es "mover" el fondo que creaste nuevamente pero hacia el otro lado.

Además, si al hacer click querés que se quede con la misma forma que si estuviese el mouse encima, quiere decir que el estado :hover tiene que compartir el estilo con la clase .boton-activo. Esta clase necesitamos agregarla con jQuery. Es para lo único que usamos javascript, sólo para agregarle la clase cuando se hace click y quitársela a los demás.

Estudiá el ejemeplo, está todo ahí! Hasta podés usar el mismo código.

alexnob · #9 (**permalink**) 10/03/2012, 10:57

Naahuel mil gracias, leyendo el codigo entendi practicamente todo y ya pude usar el codigo para lo que queria. De nuevo muchas gracias!

BaSingSe · #10 (**permalink**) 25/09/2013, 14:01

Pregunta no hay una forma de poner las imagenes en html y los efectos en css, tengo ese mismo problema pero las imagenes las necesito en html y no dentro del css ahora el efecto lo hare con otra imagen que seria el efecto como morado transparente que le quiero dar lo quiero hacer en css o javascript.... trate con tu codigo pero inmediatamente muevo la imagen del css se me desaparecen y no puedo volverlas a poner te agradeceria un monton esa ayudita....