Immagine jQuery Swap per mouse-over e mouse-down

Question

Cosa voglio ottenere:

Voglio che uno scambio di immagine si verifichi per primo quando il cursore è sopra l'immagine (mouse) e secondo quando si fa clic sull'immagine (fare clic sul mouse).

Esempio:

Ho un'immagine di una freccia verde. Per il mouse, viene scambiato con un'immagine di una freccia gialla e quando è stato cliccato su un'immagine di una freccia marrone (ma solo finché viene tenuto il clic). La freccia verde predefinita viene sempre ripristinata.

<img src="green-default.png" />
<img src="yellow-over.png" />
<img src="brown-mousedownclick.png" />

Quello che ho provato:

Ho applicato uno scambio di immagini jQuery che funziona sul mouse per evento:

https://github.com/tszming/jquery-swapimage

Esempio

<script type="text/javascript"> 
jQuery.swapImage(".swapImage"); 
</script>

<img src="green-default.png" class="swapImage {src: 'yellow-over.png'}" />

Qualsiasi consiglio sarebbe acceso.

Soluzione accettata

La soluzione di Senad (sotto) ha comportato l'uso di CSS anziché jQuery. A un elemento di collegamento viene data una classe che lo significa essere un blocco nelle dimensioni delle immagini che vengono scambiate. Le tre immagini vengono applicate come immagini di sfondo agli stati predefiniti, in bilico e attivi dell'elemento collegamento. La soluzione e il codice dimostrativo di Senad sono pubblicati di seguito.

Answer 1

Andrei 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>

Se vuoi cursore puntatore puoi aggiungerlo anche tramite CSS cursor: pointer;

Questo sarà per tutti i collegamenti con la classe "your_link_button_class"

e in jQuery per prevenire l'azione del collegamento

$(document).ready(function() { $('a.your_link_button_class').click( function() { return false; }); });

Answer 2

Andrei con immagini di precarico usando jQuery Prima e poi vincolante hover e mousedown sul tuo img elemento e modifica dell'attributo SRC nell'immagine corretta.

io userei hover Dal momento che gestirà mouseout così come mouseover.

Da quando uso mousedown Vorrei anche usare mouseup Per cambiare indietro l'IMG.

AGGIORNARE

Non devi usare jQuery per il hover Effetto, potresti farlo con CSS. Poi mousedown e mouseup Cambia le classi CSS per ottenere gli effetti desiderati.

Answer 3

Legati a Mouseover/Out e Mousedown/Up e salva gli stati, quindi il Mouseout-Event non rimuoverà l'icona marrone mentre il MouseButton è ancora giù. Quindi chiama una funzione e guarda, se il mouse è premuto o il mouse è sopra l'icona. Se nessuno, imposta l'immagine predefinita.

$('#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

Puoi usare il hover metodo, insieme al mousedown e mouseup eventi e semplicemente cambia il src attributo dell'immagine in modo appropriato:

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