JQuery, изменение изображения при наведении

Хорошо, поэтому у меня есть динамически сгенерированные изображения через PHP, поэтому не обязательно результат одного и того же изображения. И я провел последние четыре часа, просматривая Интернет и пробовав бесчисленные вещи с помощью jQuery и/или CSS, и я придумал следующее, что работает.

Теперь это работает. При наведении курсора мыши он отображает Market.png с прозрачной частью фона, являющейся tile_4.jpg, а outoutout - tile_4.jpg.

Что я хочу знать: есть ли способ выполнить то же самое, что и выше, с помощью jQuery или CSS? Я не понял это, и я потратил много времени, но я предпочел бы сделать что-то еще, если это вообще возможно, с тех пор, как было сказано выше (с массивным повторением, этот формат повторяется в настоящее время около 100 раз, но у меня есть планы чтобы расширить его до более чем 1000 раз) станет полосой пропускания.

Ответы

Ответ 1

Вы можете добавить класс к каждому из ваших <img /> элементов, таких как "xyz" (выберите лучшее имя), а затем воспользуйтесь hover(). Учитывая, что ваши изображения являются динамическими, вы можете визуализировать разметку изображения с дополнительным атрибутом данных, чтобы служить в качестве "альтернативного" или "наводящего" источника изображения. В конце вы можете сделать что-то вроде этого:

<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" />

Затем, чтобы применить функциональные возможности переключения для каждого изображения, вы можете написать небольшую функцию, которая меняет атрибут src и атрибут data-alt-src при наведении/зависании:

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

И тогда это так же просто, как выполнение функции напрямую, используя крошечный бит привязки события jQuery:

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

Рабочий пример jsFiddle (версия 1)

Вот пример из Андреса Сепара из комментариев. С помощью этого селектора вам не нужно украшать ваши изображения классом маркера. Он также предварительно загрузит альтернативное изображение источника, чтобы устранить любое отставание или мерцание при наведении курсора:

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

Рабочий пример jsFiddle (версия 2)

Ответ 2

JQuery

Вы можете использовать события mouseover и mouseout:

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

Таким образом, вы можете вынуть атрибуты onmouseout и onmouseover из HTML и сделать свой код аккуратным.

CSS

Однако самый простой способ - использовать CSS:

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

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

Ответ 3

Конечно, с jQuery это легко.

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