No sabía que se podía utilizar JQuery para algo así. Me ha ido genial, ahorrando como unas 50 lineas de código.
Explico un poco por si a alguien le sirve;
Hay una página con inputs, y cada Input tiene una imagen de cuatro partes;
Parte superior Izquierda muestra boton sin pulsar, y sin estar encima.
Parte superior Derecha muestra botón sin pulsar, pero estando encima.
Parte inferior Izquierda muestra botón pulsado, sin estar encima.
Parte inferior Derecha muestra botón pulsado, al pasar por encima.
A mí me ha quedado esto:
Código PHP:
var disparadores = $('.atributoDisparador');
//Evento Mouseenter
disparadores.mouseenter (function () {
if( ($(this).backgroundPosition()=="left top") || ($(this).backgroundPosition()=="right top") ){ //Top
//Si está en Top, el efecto hover muestra top right
$(this).css("background-position","top right");
} else if( ($(this).backgroundPosition()=="left bottom") || ($(this).backgroundPosition()=="right bottom") ){ //Bottom
//Si está en Bottom, el efecto hover muestra bottom right
$(this).css("background-position","bottom right");
}
});
//Evento Mouseleave
disparadores.mouseleave(function () {
if( ($(this).backgroundPosition()=="left top") || ($(this).backgroundPosition()=="right top") ){ //Top
//Si está en Top, el efecto hover muestra top left
$(this).css("background-position","top left");
} else if( ($(this).backgroundPosition()=="left bottom") || ($(this).backgroundPosition()=="right bottom") ){ //Bottom
//Si está en Bottom, el efecto hover muestra bottom left
$(this).css("background-position","bottom left");
}
});
Es importante considerar que uso una función especial para sacar el background-position:
Código PHP:
jQuery.fn.backgroundPosition = function() {
var p = $(this).css('background-position');
//IE
if(typeof(p) === 'undefined'){
return $(this).css('background-position-x') + ' ' + $(this).css('background-position-y');
}else{
//Otros
if (p == "0% 0%"){
return "left top";
} else if (p == "100% 0%"){
return "right top";
} else if (p == "0% 100%"){
return "left bottom";
} else if (p == "100% 100%"){
return "right bottom";
}
}
};
La modifiqué de la página
http://dextrose.be/2008/11/10/jquery...ernet-explorer.
Es útil porque la función ofrecida por jQuery no es compatible con Explorer.
Ahora tengo una duda, a ver si alguien me puede echar un cable:
Al hacer click a la imagen-disparador, antes tenía puesto que hiciera un "Bind" al input relacionado, para que hiciera una lectura de "Enter", para hacer un submit artificial.
El problema es que al simplificar las cosas con esto, no sé qué input le toca.
¿Cómo podría hacerlo para que, al hacer click al disparador, se hiciera un bind al input relacionado?