JQuery Image Swap para mouse y mouse hacia abajo
Pregunta
Lo que quiero lograr:
Quiero que se produzca un intercambio de imágenes primero cuando el cursor esté sobre la imagen (el mouse) y el segundo cuando se haga clic en la imagen (haga clic hacia abajo en el mouse).
Ejemplo:
Tengo una imagen de una flecha verde. Para el mouse, se intercambia por una imagen de una flecha amarilla y, cuando se hace clic, intercambia una imagen de una flecha marrón (pero solo mientras se sostenga el clic). La flecha verde predeterminada siempre se restaura.
<img src="green-default.png" />
<img src="yellow-over.png" />
<img src="brown-mousedownclick.png" />
Lo que he probado:
He aplicado un intercambio de imágenes jQuery que funciona en el ratón sobre el evento:
https://github.com/tszming/jquery-swapimage
Ejemplo
<script type="text/javascript">
jQuery.swapImage(".swapImage");
</script>
<img src="green-default.png" class="swapImage {src: 'yellow-over.png'}" />
Cualquier consejo sería aprobado.
Solución aceptada
La solución de Senad (a continuación) implicaba el uso de CSS en lugar de jQuery. Un elemento de enlace recibe una clase que lo establece para que sea un bloque en las dimensiones de las imágenes que se intercambian. Las tres imágenes se aplican como imágenes de fondo a los estados predeterminados, desplazados y activos del elemento de enlace. La solución y el código de demostración de Senad se publican a continuación.
Solución
Yo iría con CSS
CSS
a.your_link_button_class {
background: url('green-default.png') no-repeat;
height: 20px;
width: 20px;
display: block;
}
a.your_link_button_class:HOVER {
background: url('yellow-over.png') no-repeat;
}
a.your_link_button_class:ACTIVE {
background: url('brown-mousedownclick.png') no-repeat;
}
Html
<a class="your_link_button_class" href="#nothing"></a>
Si desea el cursor de puntero, también puede agregarlo a través de CSS cursor: pointer;
Esto será para todos los enlaces con la clase "Your_Link_Button_Class"
y en jQuery para evitar la acción de enlace
$(document).ready(function() { $('a.your_link_button_class').click( function() { return false; }); });
Otros consejos
Yo iría con Imágenes de precarga usando jQuery Primero y luego vinculante hover
y mousedown
en tu img
elemento y cambiar el atributo SRC a la imagen correcta.
yo usaría hover
Dado que manejará mouseout
tanto como mouseover
.
Desde que uso mousedown
Yo también usaría mouseup
Para cambiar el IMG de regreso.
ACTUALIZAR
No tienes que usar jQuery para el hover
Efecto, podrías hacerlo con CSS. Luego mousedown
y mouseup
Cambie las clases de CSS para lograr los efectos deseados.
Ate al mouseover/out y mouseDown/up y guarde los estados, por lo que el evento de ratón no eliminará el icono marrón mientras el mousebutton todavía está abajo. Luego llame a una función y mire, si el mouseButton está presionado o el mouse está sobre el icono. Si ninguno, configure la imagen predeterminada.
$('#img').mouseover(function() {
$(this).data('over',true);
updateImage($(this));
}).mousedown(function() {
$(this).data('down',true);
updateImage($(this));
}).mouseup(function() {
$(this).data('down',false);
updateImage($(this));
}).mouseout(function() {
$(this).data('over'false);
updateImage($(this));
});
function updateImage(elem) {
if (elem.data('down')) {
elem.attr('src','brown.png');
} else if (elem.data('over')) {
elem.attr('src','yellow.png');
} else {
elem.attr('src','green.png');
}
}
Puedes usar el hover
método, junto con el mousedown
y mouseup
eventos y simplemente cambiar el src
atributo de la imagen apropiadamente:
$("#yourImageId").hover(function() {
$(this).attr("src", "yellow-over.png");
}, function() {
$(this).attr("src", "green-default.png");
}).mousedown(function() {
$(this).attr("src", "brown-mousedownclick.png");
}).mouseup(function() {
$(this).attr("src", "green-default.png");
});