Crear menu CSS Sprite con efecto de imagen con jQuery ¿es posible?

[Mr_Raymon]

Hola a todos.

Estoy intentando hacer un menu con CSS Sprite con efecto de imagen con jQuery. Tengo un menu creado con 3 estados (normal, hover y active) y cada boton tiene un tamaño diferente. Funciona perfectamente en todos los navegadores y no hay ningun problema.

Mi problema es que quiero darle interactividad y parece que el tema se pone bastante dificil. Me gustaria poner un ejemplo para que vean lo que quiero hacer, asi que espero que no lo consideren SPAM.

w.w.w.bigmediadaily.com

La intencion es conseguir el mismo efecto que los botones MOVIES, GAMES y TECH. Me gustaria conseguir ese efecto tanto en el estado hover, como en el estado active. Tambien añadir que este menu tendra varios submenus y todos ellos con movimientos suaves.

Todo esto seguro que se puede hacer con jQuery (u algun otro componente añadido a jQuery) aunque no sea tan facil

Saludos.

[mayid]

www.bigdailymedia.com

No pude entrar en la pagina.

[Mr_Raymon]

Iniciado por mayid

No pude entrar en la pagina.

Perdon, culpa mia. He puesto la direccion mal. Ya la he modificado en el tema principal.

[mayid]

Ese menu se maneja con CSS, y quizas con ayuda de jquery para dar un efecto fadeIn.

Aqui estan los originales de imagen, que se posicionan como background-images:

http://www.bigmediadaily.com/images/menu-tech.png

http://www.bigmediadaily.com/images/menu-movies.png

Y el truco esta en correr la imagen para que en vez de la parte visible se vea la parte escondida.

Quizas esto sea todo el truco, fijate:

#games {background:url(/images/menu-games.png);}
#games:hover {background-position:bottom;}


#movies {background:url(/images/menu-movies.png);}
#movies:hover {background-position:bottom;}

#tech {background:url(/images/menu-tech.png);}
#tech:hover {background-position:bottom;}

Estas diciendo que en mouseover se muestre la parte baja de la foto.

[Mr_Raymon]

Iniciado por mayid

Ese menu se maneja con CSS, y quizas con ayuda de jquery para dar un efecto fadeIn.

Aqui estan los originales de imagen, que se posicionan como background-images:

[url]http://www.bigmediadaily.com/images/menu-tech.png[/url]

[url]http://www.bigmediadaily.com/images/menu-movies.png[/url]

Y el truco esta en correr la imagen para que en vez de la parte visible se vea la parte escondida.

Quizas esto sea todo el truco, fijate:


Estas diciendo que en mouseover se muestre la parte baja de la foto.

Logicamente se como funciona lo de "cambiar la imagen". Precisamente asi es como funciona lo que se denomina Sprite. El problema llega a ser cuando tienes un menu del estilo de la web de Apple (http://images.apple.com/es/global/nav/images/globalnavbg0907.png), entonces cambia la cosa. De hecho busque hace algunos dias el efecto FadeIn para imagenes pero no he conseguido el efecto deseado. Eso sin incluir la dificultad para un submenu en CSS intentar dar interactividad con jQuery.

Necesito ayuda sobre este tema. Espero que podais ayudarme.

Saludos y Gracias.

[_Ju]

Hace unos dias hice un pequeño ejemplo algo similar, lo hice de forma muy basica y estoy seguro que se puede mejorar mucho; espero y te sirva de algo:


http://grupogalco.net/fade-jquery.rar

[Mr_Raymon]

Iniciado por _Ju

Hace unos dias hice un pequeño ejemplo algo similar, lo hice de forma muy basica y estoy seguro que se puede mejorar mucho; espero y te sirva de algo:


[URL="http://grupogalco.net/fade-jquery.rar"]http://grupogalco.net/fade-jquery.rar[/URL]

No es lo que quiero conseguir exactamente, aunque desde luego es muy curioso el ejemplo que has puesto. Mi problema esta en que quiero conseguir hacer funcionar el mismo efecto de la web que he puesto pero con imagenes en sprite (como el menu de Apple).

El ejemplo que has puesto tiene que combinar dos imagenes diferentes y no se visualizar correctamente en Internet Explorer (tanto en las versiones antiguas como la 5 y 6, como en las ultimas 7 y 8).

Saludos y Gracias por responder _Ju.