JQuery Image Swap para mouse y mouse hacia abajo

Question

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.

Answer 1

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; }); });

Answer 2

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.

Answer 3

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');
    }
}

Answer 4

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");
});