Tema: Hover y active en javascript
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 25/09/2013, 20:01
BaSingSe
 
Fecha de Ingreso: mayo-2012
Mensajes: 117
Antigüedad: 12 años, 11 meses
Puntos: 1
Hover y active en javascript
Hola solo tengo una dudita es algo sencillo este código lo encontré en este foro, funciona perfectamente el único problema que tengo con el es que quisiera que la imagen que aparece en el style css no usarla ahí si no en el html asi quien edita la web solo cambie la imagen desde html, pero cuando trato de removerla y ponerla en el html se me desaparece.. ahora lo que si quisiera poner en el css es una imagen transparente que he creado para que en vez de movese de background-position:left a background-position:right solo aparezca y desaparezca con opacidad... pero nada de eso me sale.

este es el codigo que uso para provar la animacion ayuda pls :/
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 clase_activo = 'boton-activo';
  10.             var clase_boton = 'boton';          
  11.             
  12.             //obtenemos los botones
  13.             var botones = $('.' + clase_boton);
  14.             
  15.             //agregar clase activa si se hace click
  16.             botones.click(function(){
  17.                 botones.not(this).removeClass(clase_activo);
  18.                 $(this).addClass(clase_activo)
  19.             });
  20.         });
  21.     </script>
  22.     <style type="text/css">
  23.     <!--
  24.         .boton{
  25.             /* Estilos comunes para TODOS los botones */
  26.             display:block;
  27.             float:left;
  28.             width:88px;
  29.             height:198px;
  30.             text-indent:-3333px; /*ocultar el texto*/
  31.             background-position:right; /* ubicar la imagen de fondo hacia la derecha */
  32.         }
  33.         /* estilos para cada boton */
  34.         #boton-axe{
  35.             background-image:url(file:///C|/Users/jesus/Desktop/399920_635810316445199_881883429_n.png);            
  36.         }
  37.         /* estilos para el boton activo y para el hover */
  38.         .boton:hover, .boton-activo{
  39.             background-position:left; /* ubicar la imagen de fondo hacia la izquierda */
  40.         }
  41.     -->
  42.     </style>
  43. </head>
  44. <body>
  45.     <!-- el boton es un link con el texto axe unlimited, el cual ocultamos y ponemos una imagen -->
  46.     <a class="boton" id="boton-axe" href="#">Axe Unlimited</a> <!-- Imagen aparesca aqui -->
  47. </body>
  48. </html>