Как сделать смену картинки на другую при наведении на ссылку?

Question

[Борис Белов]

Доброго вечера.

Дано: две картинки, и ссылка
Задача: сделать так, чтобы при наведении на ссылку, картинка сменялась на другую?



Код у меня такой

<div class="col-xs-6"><img class="zagimg" src="http://doublebrain.ru/wp-content/uploads/2015/11/0013.jpg"/></div>
 <div class="col-xs-6">
<td valign="middle" ><div id="ssilki">
<li><a href="/design/dizajn-sajtov/" class="zag hvr-underline-from-center">дизайн сайта</a></li></br>
<li><a href="/design/razrabotka-logotipov" class="zag hvr-underline-from-center">разработка логотипа</a></li></div></td></div>

Answer 1

[Андрей Федоров]

Ох уж эти js-ники... Почему нужно именно правой ногой почесать левое ухо?
codepen.io/aliencash/pen/RrgzaR

Comments

[Борис Белов]

Я тоже думал через CSS, но посчитал что JS будет удобнее. Но спасибо за ответ

Answer 2

[Петр]

$('a.zag').on( "mouseenter", function(){
 $('.zagimg').attr('src', $(this).attr('data-back-src'));
});

А в ссылки добавьте

<a href="/design/dizajn-sajtov/" data-back-src="http://doublebrain.ru/wp-content/uploads/2015/11/0013.jpg" class="zag hvr-underline-from-center">дизайн сайта</a></li>

Comments

[Борис Белов]

Спасибо за ответ. Но почему то не вышло. Вставил как вы написали, для проверки для "дата-бэк-срк" вставил другую ссылку joxi.ru/D2PKxjXidJNwDm

[Петр]

Борис Белов: Вы скрипт поставили вперед верстки. В таком случае привязка событий должна быть иначе
$('body').on("mouseenter", 'a.zag', function()...

[Борис Белов]

https://jsfiddle.net/ufzkhe3d/ я просто проверил еще тут. И оно не пашет(

[Борис Белов]

Петр: извиняюсь, заработало! А как сделать чтобы картинка теперь обратно вернулась? Когда я убираю курсор с ссылки?

[Петр]

Борис Белов: У вас в примере jquery не подключен

[Петр]

Петр: on('mouseout') и добавить атрибут с картинокой по умолчанию в img

[Борис Белов]

Петр: Петр, спасибо огромное. А не могли бы Вы, прописать, куда вставить on('mouseout')

<script>
$('a.zag').on( "mouseenter", function(){
 $('.zagimg').attr('src', $(this).attr('data-back-src'));
 });
 </script>

А то я не очень понял, как именно прописать.

[Петр]

Борис Белов:
$('a.zag')
.on( "mouseenter", function(){
$('.zagimg').attr('src', $(this).attr('data-back-src'));
})
.on('mouseout', function(){ var img = $('.zagimg'); img.attr('src', img.attr('data-def-src')); });

[Борис Белов]

Петр: не сработало почему-то =/ прописал в ссылку " data-def-src="doublebrain.ru/wp-content/uploads/2015/11/0013.jpg" "

[Борис Белов]

Петр: может у меня что то не так? joxi.ru/Grq1bMJuNGBdQr

[Петр]

Борис Белов: в img атрибута data-def-src нет

[Борис Белов]

супер! спасибо! :)

[Борис Белов]

Петр: Петр, извиняюсь за задалбывание) такой вопрос, а возможно ли сделать fade переход между картинками?

[Петр]

Борис Белов: Взамен прямого изменения img делаете .fadeOut( [duration ] [, complete ] ), в complete функции меняете для img src и снова .fadeIn. Только придется придумать логику если mouseout раньше пришел.

Answer 3

[Stalker_RED]

Альтернативная картинка прописана в data-img2
В jQuery.hover() две функции:
1. сохранить оригинальный src и показать альтернативную картинку
2. вернуть оригинальный src на место

https://jsfiddle.net/kpgmqxkb/

Comments

[Борис Белов]

Не при наведении на картинку, а нужно чтобы при наведении на ссылку.

[Stalker_RED]

Борис Белов: ну тогда hover нужно вешать на ссылку.
https://jsfiddle.net/kpgmqxkb/1/

[Борис Белов]

спасибо!