Как поменять src картинки с помощью скрипта?

Question

[struhovv]

Как при наведении на ссылку менять путь к картинке у .img внутри определенного блока?

Comments

[Антон Швец]

[скрипт]картинка.src=сурс[/скрипт]

Answer 1

[0xD34F]

$('.links').on('mouseover', 'a', function() {
  $(this).closest('.block').find('img').attr('src', $(this).data('src'));
});

или

document.addEventListener('mouseover', ({ target: t }) => {
  const { src } = t.dataset;
  if (src) {
    t.closest('.block').querySelector('img').src = src;
  }
});

или

document.querySelectorAll('[data-src]').forEach(function(n) {
  n.addEventListener('mouseenter', this);
}, ({ target: t }) => t
  .parentNode
  .parentNode
  .nextElementSibling
  .setAttribute('src', t.getAttribute('data-src'))
);

Comments

[struhovv]

Извините, некорректно написал. Если у меня href это ссылка на другую страницу, а картинка в data атрибуте, тогда надо так написать?

<ul class="links">
    <li><a href="/" data-src="/img/1.jpg">link1</a></li>
    <li><a href="/" data-src="/img/2.jpg>link2</a></li>
    <li><a href="/" data-src="/img/3.jpg>link3</a></li>
    <li><a href="/" data-src="/img/4.jpg>link4</a></li>
</ul>

$('.links').on('mouseover', 'a', function() {
$(this).closest('.block').find('.img').attr('src', this.this.attr('data-src'));
});

[0xD34F]

обновил ответ

Answer 2

[Максим]

Comments

[Karpion]

Я бы дал ссылкам названия - в виде цвета, в который они раскрашивают. Более наглядно.

[Максим]

Karpion, если автору надо будет он даст название-я так понимаю что там картинки будут не с placehold

Answer 3

[Julia Ovod]

У вас там картинка сделана через <div />, поэтому так, но вообще лучше использовать тег <img />.

$(document).ready(function() {
  $('a').hover(function() {  
    $(this).closest('.block').find('.img').css('background-color', 'yellow');
  });
});