Desarrollo y diseño

Botones jQuery w7

mrOizo
mrOizo #1 Nov '10

Hola a tod@s.

He visto un efectillo como el de los botones de w7 en jQuery, y el problema que tengo es que en el ejemplo solo venia 1 boton, entonces cuando quiero añadir mas botones no se como hacerlo, he probado muchas cosas pero no tengo ni idea de como funciona jquery.

Este es el boton con el ejemplo:
http://www.ozdesign.es/menu/original.php

Y este el "intento" de añadir mas botones:
http://www.ozdesign.es/menu/index.php

Se puede ver que el jquery actua con todos los botones cuando situas el raton sobre uno de ellos, ademas de descuadrar los que estan anteriores.

Alguien podria ayudarme con esto? ya no se donde mirar :S

en la pagina de muestra hay un enlace a los archivos.

Gracias por adelantado.

GamA
GamA #2 Nov '10

Yo suelo usar jQuery, aunque tampoco lo exprimo al máximo.

Por lo que veo, parece que está claro es que además de jQuery necesitas otra biblioteca Javascript más. Fíjate en el head:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/javascript" src="jquery.cursorHover.js"></script>

Necesitas jquery.cursorHover.js. Añádelos a tu web, también deberás agregar esto:

<script type="text/javascript">
$(document).ready(function(){
$('.myButton').cursorHover({
outerImage: 'hoverWrap.png',
innerImage: 'hoverInside.png',
innerBorder: 1,
align: "top"
});
});
</script>

Para decirle que imágenes quieres usar cuando el cursor esté fuera y dentro. En este caso tiene un estilo como el siguiente:

<style type="text/css">
.wrap {
background-color:#000;
width:148px;
margin:0 auto;
}
.myButton, .innerImage, .myButtonLink {
width: 148px;
height: 40px;
margin:0 auto;
}
</style>

Defínele tu propio estilo para esas clases o renómbralas como veas (teniendo en cuenta que si las renombras debes volver al javascript anterior de ready y cambiar los nombres usados por los que pongas tú), aunque yo para probar tiraría tal cual y luego ya iría modificando.

Imagino que una vez hecho esto, podrás añadir botones usando:

<div class="myButton">
<a class="myButtonLink" href="#">1</a>
</div>

Logicamente cambiando el href="#" por la dirección correcta.

No lo he probado, pero yo intentaría hacer lo que te dije, no creo que falte nada, ya que además el código es poco.

mrOizo
mrOizo #3 Nov '10

Edit: Gama, has mirado los archivos o el codigo de la web? es que todo eso que me has dicho es tal y como esta hecho... Me quedo igual que estaba.

mrOizo
mrOizo #4 Nov '10

En teoria lo que hay que modificar es el jQuery, nadie sabe que hacer?

NeB1
NeB1 #5 Nov '10

#4 la forma cutre, fácil y rápida sería esta:

		$(document).ready(function(){
			$('#boton1').cursorHover({
				outerImage: 'hoverWrap.png',
				innerImage: 'hoverInside.png',
				innerBorder: 1,
				align: "top"
			});
			$('#boton2').cursorHover({
				outerImage: 'hoverWrap.png',
				innerImage: 'hoverInside.png',
				innerBorder: 1,
				align: "top"
			});
			$('#boton3').cursorHover({
				outerImage: 'hoverWrap.png',
				innerImage: 'hoverInside.png',
				innerBorder: 1,
				align: "top"
			});
			$('#boton4').cursorHover({
				outerImage: 'hoverWrap.png',
				innerImage: 'hoverInside.png',
				innerBorder: 1,
				align: "top"
			});
		});

			<div id="boton1">
				<a class="myButtonLink" href="#">1</a>
			</div>
			<div id="boton2">
				<a class="myButtonLink" href="#">1</a>
			</div>
			<div id="boton3">
				<a class="myButtonLink" href="#">1</a>
			</div>
			<div id="boton4">
				<a class="myButtonLink" href="#">1</a>
			</div>

Si lo anterior te funciona (ahora mismo no me apetece probarlo, pruebalo antes de seguir), lo siguiente, que sigue siendo un parche cutre pero más arreglado, también debería funcionar:

		$(document).ready(function(){
                        $('.myButton').each(function(){
                            id = $(this).attr('id');
                            $(id).cursorHover({
				outerImage: 'hoverWrap.png',
				innerImage: 'hoverInside.png',
				innerBorder: 1,
				align: "top"
                            });
                        });
		});


			<div class="myButton" id="boton1">
				<a class="myButtonLink" href="#">1</a>
			</div>
			<div class="myButton" id="boton2">
				<a class="myButtonLink" href="#">1</a>
			</div>
			<div class="myButton" id="boton3">
				<a class="myButtonLink" href="#">1</a>
			</div>
			<div class="myButton" id="boton4">
				<a class="myButtonLink" href="#">1</a>
			</div>

Y ya, si quieres intentar rizar el rizo (que funcione todo esto, depende del tio que haya hecho el plugin, en teoría debería funcionar) puedes probar esto:

		$(document).ready(function(){
                        $('.myButton').each(function(){
                            $(this).cursorHover({
				outerImage: 'hoverWrap.png',
				innerImage: 'hoverInside.png',
				innerBorder: 1,
				align: "top"
                            });
                        });
		});

			<div class="myButton">
				<a class="myButtonLink" href="#">1</a>
			</div>
			<div class="myButton">
				<a class="myButtonLink" href="#">1</a>
			</div>
			<div class="myButton">
				<a class="myButtonLink" href="#">1</a>
			</div>
			<div class="myButton">
				<a class="myButtonLink" href="#">1</a>
			</div>
mrOizo
mrOizo #6 Nov '10

Nada no funciona ninguna opcion. Ya digo, el tema esta en modificar el "jquery.cursorHover.js" y yo no se de jquery.

Esta es la web original del creador:
http://isthatclear.com/jquery/cursorHover/

Segun el post de un usuario, habria que hacer esto:

spoiler

Lo he intentado hacer y no lo he conseguido :/

Usuarios habituales

  • mrOizo
  • NeB1
  • GamA

Tags