Tema: Botones con mouseover mouseout y onclick
Ver Mensaje Individual
  #6 (permalink)  
Antiguo 09/03/2012, 08:43
Avatar de Naahuel
Naahuel
 
Fecha de Ingreso: marzo-2011
Ubicación: localhost
Mensajes: 796
Antigüedad: 13 años, 8 meses
Puntos: 192
Respuesta: Botones con mouseover mouseout y onclick
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
  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <title></title>
  5.     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  6.     <script type="text/javascript">
  7.         $(function(){
  8.             //variables de configuración
  9.             var opacidad_inicial = 0.4;
  10.             var opacidad_final   = 1;
  11.             var clase_activo = 'boton-activo';
  12.             var clase_boton = 'boton';
  13.             
  14.             
  15.             //obtenemos los botones
  16.             var botones = $('.' + clase_boton);
  17.             //apliamos estilos iniciales
  18.             botones.css({
  19.                 opacity:opacidad_inicial
  20.             });
  21.             //animación al pasar el mouse
  22.             botones
  23.                 .mouseenter(function(){
  24.                     $(this).not('.' + clase_activo).stop().animate({
  25.                         //incluir estilos
  26.                         opacity:opacidad_final
  27.                     });
  28.                 })
  29.                 .mouseleave(function(){
  30.                     $(this).not('.' + clase_activo).stop().animate({
  31.                         //incluir estilos
  32.                         opacity:opacidad_inicial
  33.                     });
  34.                 });
  35.             //agregar clase activa si se hace click
  36.             botones.click(function(){
  37.                 botones.not(this).removeClass(clase_activo).trigger('mouseleave');
  38.                 $(this).addClass(clase_activo)
  39.             });
  40.         });
  41.     </script>
  42.     <style type="text/css">
  43.     <!--
  44.         .boton{
  45.             /* Estilos comunes para TODOS los botones */
  46.             display:block;
  47.             float:left;
  48.             width:200px;
  49.             height:200px;
  50.             text-indent:-3333px; /*ocultar el texto*/
  51.         }
  52.         /* Estilos para cada boton*/
  53.         #boton-axe{ background:url(http://www.thescentfactoryonline.com/yahoo_site_admin/assets/images/axe_unlimited.68181717.jpg); }
  54.         #boton-rexona{ background:url(http://www.informabtl.com/wp-content/uploads/2011/07/Imagen-REXONA-FINAL1.jpg); }
  55.         #boton-rexona-cd{ background:url(http://babyccinoblog.com/wp-content/uploads/2008/04/rexona2.jpg); }
  56.         /* estilos para el boton activo */
  57.         .boton-activo{
  58.             
  59.         }
  60.     -->
  61.     </style>
  62. </head>
  63. <body>
  64.     <!-- el boton es un link con el texto axe unlimited, el cual ocultamos y ponemos una imagen -->
  65.     <a class="boton" id="boton-axe" href="#">Axe Unlimited</a>  
  66.     <a class="boton" id="boton-rexona" href="#">Rexona Men</a>
  67.     <a class="boton" id="boton-rexona-cd" href="#">Rexona Cotton dry</a>
  68. </body>
  69. </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:
  1. 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.
  2. Aplica el estilo inicial que tendrían todos los botones
  3. Asigna un evento para que al pasar el mouse, se aplica una opacidad y al sacarlo se aplique otra.
  4. 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).
  5. 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
__________________
nahueljose.com.ar