Hover y active en javascript

BaSingSe · #1 (**permalink**) 25/09/2013, 20:01

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<!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(file:///C|/Users/jesus/Desktop/399920_635810316445199_881883429_n.png);            
        }
        /* 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> <!-- Imagen aparesca aqui -->
</body>
</html>