JQuery-Bildtausch gegen Maus-Over und Maus-Down

Question

Was ich erreichen möchte:

Ich möchte, dass ein Bildtausch zuerst auftritt, wenn sich der Cursor über dem Bild befindet (Maus übers, zweitens, wenn das Bild geklickt wird (Maus -Down -Klick).

Beispiel:

Ich habe ein Bild eines grünen Pfeils. Für die Maus wird sie gegen ein Bild eines gelben Pfeils ausgetauscht und beim Klicken ein Bild eines braunen Pfeils (aber nur so lange, wie der Klick gehalten wird). Der Standard -grüne Pfeil wird immer wiederhergestellt.

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

Was ich versucht habe:

Ich habe einen JQuery -Image -Swap angewendet, der über die Maus über das Ereignis funktioniert:

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

Beispiel

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

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

Jeder Rat würde abgeschrieben.

Akzeptierte Lösung

Die Lösung von Senad (unten) beinhaltete die Verwendung von CSS anstelle von JQuery. Ein Link -Element erhält eine Klasse, die es um einen Block in den Abmessungen der ausgetauschten Bilder aussieht. Die drei Bilder werden als Hintergrundbilder auf die Standard-, Schwebe- und aktiven Zustände des Link -Elements angewendet. Die Lösung und den Demonstrationscode von Senad sind unten veröffentlicht.

Answer 1

Ich würde mit CSS gehen

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>

Wenn Sie den Zeiger Cursor wünschen, können Sie ihn auch über CSS hinzufügen cursor: pointer;

Dies gilt für alle Links mit der Klasse "your_link_button_class" "

und in jQuery, um Verbindungsaktionen zu verhindern

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

Answer 2

Ich würde mit gehen mit Vorladungsbilder mit JQuery zuerst und dann bindend hover und mousedown auf Ihrem img Element und Ändern des SRC -Attributs auf das richtige Bild.

ich würde ... benutzen hover Da wird es umgehen mouseout ebenso gut wie mouseover.

Da benutze ich mousedown Ich würde auch verwenden mouseup Um die IMG zurück zu ändern.

AKTUALISIEREN

Sie müssen jQuery nicht für die verwenden hover Effekt, Sie könnten es mit CSS tun. Dann weiter mousedown und mouseup Ändern Sie die CSS -Klassen, um die gewünschten Effekte zu erzielen.

Answer 3

Binden Sie an Mausover/Out und MouseDown/Up und retten Sie die Zustände, sodass der Mausout-Ereignis das braune Symbol nicht entzieht, während der Mausbutton noch unten ist. Rufen Sie dann eine Funktion auf und schauen Sie, wenn der Mausbutton gedrückt wird oder die Maus über dem Symbol liegt. Wenn keine, setzen Sie das Standardbild.

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

Du kannst den ... benutzen hover Methode zusammen mit dem mousedown und mouseup Ereignisse und einfach ändern src Attribut des Bildes angemessen:

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