web-dev-qa-db-fra.com

jQuery, changement d'image en survol

D'accord, j'ai donc généré des images dynamiquement via PHP, donc pas nécessairement les mêmes images résultent. Et j'ai passé les quatre dernières heures à scanner Internet et à essayer d'innombrables choses avec jQuery et/ou CSS, et j'ai trouvé ce qui suit qui fonctionne.

    <a href="build.php?x=1875&y=2020"><img style='background:url(images/tile_4.jpg)' src='images/tile_4.jpg' onmouseover="this.src='images/Market.png'" onmouseout="this.src='images/tile_4.jpg'" /></a>
<a href="build.php?x=1876&y=2020"><img style='background:url(images/tile_4.jpg)' src='images/tile_4.jpg' onmouseover="this.src='images/Market.png'" onmouseout="this.src='images/tile_4.jpg'" /></a>
<a href="build.php?x=1877&y=2020"><img style='background:url(images/tile_4.jpg)' src='images/tile_4.jpg' onmouseover="this.src='images/Market.png'" onmouseout="this.src='images/tile_4.jpg'" /></a>
<a href="build.php?x=1878&y=2020"><img style='background:url(images/tile_4.jpg)' src='images/tile_4.jpg' onmouseover="this.src='images/Market.png'" onmouseout="this.src='images/tile_4.jpg'" /></a>
<a href="build.php?x=1879&y=2020"><img style='background:url(images/tile_4.jpg)' src='images/tile_4.jpg' onmouseover="this.src='images/Market.png'" onmouseout="this.src='images/tile_4.jpg'" /></a>

Market.png a un fond transparent.

Maintenant, ce qui précède fonctionne. Au survol de la souris, il affiche Market.png avec la partie d'arrière-plan transparent étant tile_4.jpg et à la sortie de la souris, c'est tile_4.jpg.

Ce que je veux savoir: existe-t-il un moyen d'accomplir exactement la même chose que ci-dessus avec jQuery ou CSS? Je ne l'ai pas compris, et j'ai passé des heures à essayer, mais je préfère faire autre chose si possible depuis ce qui précède (avec une répétition massive, le format ci-dessus est répété actuellement environ 100 fois, mais j'ai des plans pour l'étendre à plus de 1000 fois) deviendra un porc de bande passante.

javascriptjqueryhtmlcss
19
Witold Kowelski

Vous pouvez ajouter une classe à chacun de vos <img /> éléments, tels que 'xyz' (veuillez choisir un meilleur nom), puis profitez de la fonction hover () . Étant donné que vos images sont dynamiques, vous pouvez restituer le balisage d'image avec un attribut de données supplémentaire pour servir de source d'image "alternative" ou "survol". En fin de compte, vous pourriez rendre quelque chose comme ceci:

<img class="xyz" data-alt-src="/images/Market.png" src="/images/tile_4.png" />
<img class="xyz" data-alt-src="/images/Something.png" src="/images/tile_5.png" />

Et puis, pour appliquer la fonctionnalité de commutation pour chaque image, vous pouvez écrire une petite fonction qui permute l'attribut image src et l'attribut data-alt-src attribut en vol stationnaire/en vol stationnaire:

var sourceSwap = function () {
    var $this = $(this);
    var newSource = $this.data('alt-src');
    $this.data('alt-src', $this.attr('src'));
    $this.attr('src', newSource);
}

Et puis c'est aussi simple que d'exécuter la fonction directement en utilisant un tout petit peu de liaison d'événement jQuery:

$(function () {
    $('img.xyz').hover(sourceSwap, sourceSwap);
});

Voici un exemple de travail (version 1):

var sourceSwap = function () {
        var $this = $(this);
        var newSource = $this.data('alt-src');
        $this.data('alt-src', $this.attr('src'));
        $this.attr('src', newSource);
    }

    $(function () {
        $('img.xyz').hover(sourceSwap, sourceSwap);
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img class="xyz" data-alt-src="http://cdn1.iconfinder.com/data/icons/fatcow/32/accept.png" src="http://cdn1.iconfinder.com/data/icons/fatcow/32/cancel.png" />
<br/>
<img class="xyz" data-alt-src="http://cdn1.iconfinder.com/data/icons/fatcow/32/accept.png" src="http://cdn1.iconfinder.com/data/icons/fatcow/32/cancel.png" />
<br/>
<img class="xyz" data-alt-src="http://cdn1.iconfinder.com/data/icons/fatcow/32/accept.png" src="http://cdn1.iconfinder.com/data/icons/fatcow/32/cancel.png" />

Voici un exemple de Andres Separ dans les commentaires. Avec ce sélecteur, vous n'avez pas besoin de décorer vos images avec une classe de marqueurs. Il préchargera également l'image source alternative pour aider à éliminer tout décalage ou scintillement lors du survol:

$(function() {
    $('img[data-alt-src]').each(function() { 
        new Image().src = $(this).data('alt-src'); 
    }).hover(sourceSwap, sourceSwap); 
});

Et voici la deuxième version:

var sourceSwap = function () {
        var $this = $(this);
        var newSource = $this.data('alt-src');
        $this.data('alt-src', $this.attr('src'));
        $this.attr('src', newSource);
    }

    $(function() {
        $('img[data-alt-src]').each(function() { 
            new Image().src = $(this).data('alt-src'); 
        }).hover(sourceSwap, sourceSwap); 
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img data-alt-src="http://cdn1.iconfinder.com/data/icons/fatcow/32/accept.png" src="http://cdn1.iconfinder.com/data/icons/fatcow/32/cancel.png" />
<br/>
<img data-alt-src="http://cdn1.iconfinder.com/data/icons/fatcow/32/accept.png" src="http://cdn1.iconfinder.com/data/icons/fatcow/32/cancel.png" />
<br/>
<img data-alt-src="http://cdn1.iconfinder.com/data/icons/fatcow/32/accept.png" src="http://cdn1.iconfinder.com/data/icons/fatcow/32/cancel.png" />
56
Cᴏʀʏ

jQuery

Vous pouvez utiliser les événements mouseover et mouseout:

$("img").on({
 "mouseover" : function() {
    this.src = 'images/Market.png';
  },
  "mouseout" : function() {
    this.src='images/tile_4.jpg';
  }
});

De cette façon, vous pouvez supprimer les attributs onmouseout et onmouseover de votre code HTML et rendre votre code propre.

CSS

Cependant, le moyen le plus simple consiste à utiliser CSS:

img {
  background-image: url('images/tile_4.jpg');
}

img:hover {
  background-image: url('images/Market.png');
}
14
krishgopinath

Bien sûr, avec jQuery, c'est facile.

$('img').hover(function(){
    $(this).attr('src','images/Market.png');
},function(){
     $(this).attr('src','images/tile_4.jpg'); 
});
4
Zevi Sternlicht