Se podrá hacer con CSS?

[Megcapkill]

Hola.. que tal? Bueno les cuento yo hace unos años hice unos botones con Flash.. y me gustaría cambiarlos por CSS.. sin embargo no querría que mis usuarios notaran el cambio, por lo que los botones deberían quedar iguales.. o muy similares..

Estuve un buen rato probando combinaciones y buscando por la web pero no lo he logrado.. si alguien me puede dar una mano, yo encantado..

Les dejo el boton:

http://www.gigasize.com/get/r9po91pxm4d

Pesa solo 1Kb pero no lo puedo insertar directamente aca :S

Saludos y gracias!!

[SPAWN3000]

Bueno, realmente no pude ver el boton...lo cierto es que si es solo una animacion, pueder crear una imagen gif (Que no ejecute un ciclo de repeticiones...), Ahora puedes hacer que en la propiedad hover, reemplaze la imagen estatica por la que tiene la animacion(Simuando flash). Y listo. (Recomendacion:Seria mucho mejor usar sprites--Esto para que no se note el espacion de carga entre el cambio de imagen que puede generar la primera vez que el usuario pasa el mouse sobre la imagen).

Espero te ayude, saludos...

[SPAWN3000]

Ya lo visualize, y sipi, si se puede dejar igual....

[Megcapkill]

Iniciado por SPAWN3000

Ya lo visualize, y sipi, si se puede dejar igual....

Hola, gracias x contestar y perdón la demora. Estuve rindiendo finales en la universidad jeje..

Se puede hacer con CSS eso? O sea.. no uso el flash o el cambio de imágenes xq mi barra de menú es variable y carga el campo nombre de una base de datos respecto a un query.. entonces cada vez que cargo la pagina se podría llegar a ver distinto a la anterior, además del hecho de poder agregar o quitar categorías sin tener que hacer nuevas imágenes o tocar mi código.. es el motivo por el cual quería recurrir al CSS.. Entonces se puede? Como sería?

Muchas gracias!

[cristian_cena]

Hola megcapkill, crea una capa, y crea las dos imágenes (default y hover) en una sola usando sprites (aquí el generador online que uso yo)

luego cambias el background position de la imagen según el boton este en reposo o esté en hover.

ejemplo:
a{background-position:...esto esta en reposo...;}
a:hover{background-position:...esto esta en hover...;}

Espero te sea de utilidad. un abrazo.

[Megcapkill]

No lo quiero hacer a partir de imágenes ya que lo que dicen los botones puede cambiar con una simple modificación de mi base de datos, y no es la idea estar atado a lo que dice el botón, ni tener que cambiarlo a cada momento. Gracias por el generador, me será útil para otra cosa, pero en este momento querría saber si se puede hacer a simple CSS, o sea, tener el formato de la animación definido y meterle el texto que sea..

Muchas gracias!

[mdk]

Si, puedes hacerlo mediante scrites como ya te han dicho, de forma, que solo cambies el texto y los links de los botones, las imágenes si las hicieras en formato png para que fuera transparente el fondo sobre el que irian las rayas, sería lo mejor, y luego metiendo un tiempo entre cada imagen para que se note la animación. Tendrías que recurrir también a javascript si deseas esa animación.

[cristian_cena]

Megcapkill, coincido con mdk, si el texto cambia cuando el raton se pose en hover, sería en mi humilde opinión demasiado rebuscado hacerlo solo con css. mas bien lo haría con jquery que te garantiza que va a funcionar incluso en ie6. creando una capa padre relativa y dos hijas absolutas con el texto (dinámico) adentro. y que al producirse el hover sobre la caja padre cambien las coordenadas de posicion las cajas hijas o bien cambien su valor de display (none por block y viceversa).

Saludos.

pd: fijate este enlace, busca el efecto hover, ahi tienes un ejemplo.

[Megcapkill]

Mmm ahí lo estuve mirando, pero no entendí demasiado, lo miraré con más profundidad.

Intenté hacer algo con cambio de imágenes. Puse la imagen quieta y al hacer rollover lo cambiaba por un gif que hacia el movimiento de la barras y su cambio de color (no se xq en el gif se ve muy entrecortado)

Lo que me mató fue que el color del texto cambia después de un cierto tiempo de iniciado el gif, y bueno me enroqué y nada bueno ocurrió luego. Les dejo el código que intenté (con javascript):

Código Javascript:

<script>
    function colorear(src, colorActual) {
        src.style.color=colorActual;
    }
    function hover(src, colorActual) {
        src.style.background="url(img/menu2.png)";
        colorear(src, colorActual);
    }
    function hout(src, colorActual) {
        src.style.background="url(img/menu1.png)";
        colorear(src, colorActual);
    }
</script>
 

Y lo llamo con:

Código HTML:

<div class="barra">
                <ul>
 
<?php
    $sec_select="SELECT SEC_ID, SEC_nombre, SEC_orden FROM SECCION WHERE SEC_catID='" . $categoriaActual . "' ORDER BY SEC_orden";
    $sec_result = mysql_query($sec_select) or die(mysql_error());
    while ($sec = mysql_fetch_array($sec_result, MYSQL_BOTH)) {
        $nombreSeccion = strtoupper($sec["SEC_nombre"]);
        if ($sec["SEC_ID"] == $seccionActual) {
            ?> <li style="background:url(img/menu1.png); background-repeat:no-repeat"> <?php echo $nombreSeccion . "</li>";
        } else {
            ?> <li style="background:url(img/menu1.png); background-repeat:no-repeat"><a href="javascript:avanzar(<?php echo $categoriaActual; ?>,<?php echo $sec["SEC_ID"]; ?>,1)" onmouseover="hover(this,'red')" onmouseout="hout(this,'black')"><?php echo $nombreSeccion; ?></a></li> <?php
        } 
    } ?>
    
                </ul>
            </div>
 

Y el CSS:

Código CSS:

.barra ul {
padding-left: 0;
margin-left: 0;
float: center;
width: 100%;
font-family: Tahoma, arial;
}
 
.barra ul li {
display: inline;
}
 

O sea, las barritas de la animación son las mismas para todos los botones, lo que cambia es el texto de uno a otro. Por eso tengo que independizar ambas partes es la animación. Eso es lo que me está llevando a mis problemas :(

Muchas gracias a todos!!