jQuery image Swap pour la souris et la souris sur le bas

Question

Ce que je veux atteindre:

Je veux un échange d'image pour se produire en premier lorsque le curseur est sur l'image (souris sur) et la seconde lorsque l'image est cliqué (souris vers le bas clic).

Exemple:

J'ai une image d'une flèche verte. Pour la souris sur, il est troqué pour une image d'une flèche jaune swaps et quand on clique dessus une image d'une flèche brune (mais seulement si longtemps que le clic est maintenu). La valeur par défaut flèche verte est toujours restaurée.

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

Ce que j'ai essayé:

J'ai appliqué un swap d'image jQuery qui fonctionne sur la souris sur l'événement:

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

Exemple

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

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

Tout conseil serait aprécié.

solution acceptée

La solution de Senad (ci-dessous) a entraîné l'utilisation de CSS au lieu de jQuery. Un élément de liaison est donné une classe que les styles qu'il soit un bloc dans les dimensions des images étant permuté. Les trois images sont appliquées sous forme d'images d'arrière-plan à la valeur par défaut, en vol stationnaire et d'états actifs de l'élément de liaison. solution de Senad et le code de démonstration sont affichés ci-dessous.

Answer 1

Je voudrais aller avec 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 vous voulez curseur de pointeur vous pouvez l'ajouter par CSS aussi cursor: pointer;

Ce sera pour tous les liens avec la classe « your_link_button_class »

et jQuery pour empêcher l'action de lien

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

Answer 2

Je préchargement des images en utilisant jquery d'abord, puis lier hover et mousedown sur votre élément img et changer l'attribut src à l'image correcte.

J'utiliser hover car il traitera mouseout ainsi que mouseover.

Depuis que je l'utilise mousedown j'utiliser aussi mouseup pour changer l'arrière img.

UPDATE

Vous ne devez pas utiliser jquery pour l'effet de hover, vous pouvez le faire avec css. Puis, le mousedown et le changement mouseup les classes CSS pour obtenir les effets souhaités.

Answer 3

Bind à mouseover / out et mousedown / et les états de sauvegarde, de sorte que le mouseout événement ne supprimera pas l'icône brune tandis que le bouton de la souris est toujours en baisse. Ensuite, appelez une fonction et l'apparence, si le bouton de la souris est pressée ou la souris est sur l'icône. Si aucune, ensemble image par défaut.

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

Vous pouvez utiliser la méthode de hover, ainsi que les événements et mousedown mouseup, et simplement changer l'attribut src de l'image appropriée:

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