Как просто сменить src у img при наведении hover?

Question

[pakrauce]

Есть иконки социальных сетей

<ul class="tb_social">
  <li><a href="#"><img src="img/tb_social/in.png" alt="LinkedIn"></a></li>
  <li><a href="#"><img src="img/tb_social/tw.png" alt="Twitter"></a></li>
  <li><a href="#"><img src="img/tb_social/pt.png" alt="Printerest"></a></li>
  <li><a href="#"><img src="img/tb_social/g.png" alt="Google+"></a></li>
  <li><a href="#"><img src="img/tb_social/rss.png" alt="RSS"></a></li>
</ul>

При наведении на ссылку нужно сменить изображение на другое (та же картинка, только с другим фоном). Как-то можно это просто закодить? Иконки для hover с теми же именами файлов лежат в папке tb_social_hover, т.е. сменить только папку в пути.

Answer 1

[Олег]

Не нужно менять src - почитай что такое спрайты

Comments

[Roman]

Я конечно дико извиняюсь уважаемый, но ваша ссылка показывает как менять параметр background, а так как автору надо поменять scr, то он не подходит, потому что параметра scr у того же img нет. Я сам много рыл, но не нашел решения(

[Олег]

Роман: прочитай пожалуйста статью... Для ленивых, ты объединяешь несколько картинок в одну (спрайт), и ставишь её фоном так, чтобы была видна только нужная тебе часть картинки. При ховере смещаешь фон, и получается как-будто у тебя другая картинка...
Такой подход более правильный, так как в момент ховера не нужно загружать еще одну картинку и не происходит "пропадание" элемента со страницы на вермя прогрузки данной картинки.

[Олег]

Роман: Опиши ситуацию, в которой тебе прямо необходимо поменять src... это делается совсем не сложно - другой вопрос состоит в том, что в подавляющем большинстве случаев это попросту не правильное решение.

[Roman]

Олег: при чем тут спрайты? чуваку надо было именно менять src. То есть он не background-ом рисунки делает, а через img. Ситуация например проста: При загрузке сайта должно проиграться анимированное лого (1 цикл - пример флага, который колыхнулся и повис). А дальше при наведении на этот файл, должна играть другая анимация. то есть это должен быть другой гиф. Флеш использоваться нельзя, только гифки. По ховеру должна подгружаться вторая картинка через img (такое решение, строго не через background). Вот и ковыряемся. А потом еще надо реализовать предзагрузку обоих изображений, что бы они не маргали в момент первой замены. Бубен достал и реализовал собственно.

[Олег]

// html
< img src="pic_1.gif" / >
// jquery
var flag = $("img#flag");
setTimeout(function(){
flag.attr('src', 'pic_2.gif');
flag.hover(function(){
$(this).attr('src', 'pic_3.gif');
},function(){
$(this).attr('src', 'pic_2.gif');
})
},/*Сколько там у тебя анимация 1-я идет*/)

[Олег]

Роман: только гифки не забудь подгрузить все 3 заранее

[Roman]

Олег: я уже решил задачу. Но есть еще условие которые я не описал. Решить ее только с помощью css, без ява и джиквери. Так то на яве там в 2 строки все))) А тут сложнее)) все цсс-ом

[Олег]

По сабжу спрайты нужны были.
Твоей задачи не знаю. Решение на CSS, так понимаю через кейфреймы - IE только с 10-ки потдерживает - так что советовать такое всем и всякому, на твоем месте, я бы не стал.

[Roman]

Олег: не нужны были спрайты. Точнее автор описал ситуацию когда ему нужна смена файла (пусть то название сохранялось, а только папка в пути менялась). Ты прав, что в его случае спрайты идеальное и самое простое решение, но сама модель описанной задачи такая, как у меня, но условие, что заменяемая картинка и заменяющая реально разные файлы. Решил без кейфреймов. Работает с ИЕ7. Да и если бы с 10ки работало, то забил бы, т.к. на ие только Госики сидят. А они не целевая аудитория проекта. Ну и по сути... я реально не советовал ничего. Просто наткнулся на то, как ты советуешь и поправил, т.к. ему повезло, что спрайты подошли, а мне не очень. Итог - сутки думал)

[Олег]

Роман: линк на твое решение можно увидеть?

[Roman]

Олег: к сожалению пока нет. В закрытом режиме еще проект. Кратко: типа костыля) в img гружу картинку через scr. Img обернут div. У него как беграунд вторая картинка. При наведении на див img-у ставлю disply:none. Т.к. Картинки практически одинаковые, то все отрабатывается супер.

[Олег]

Роман: те же яйца, только в профиль. gif тоже можно слепить в спрайт, и не будет, как ты сам выразился, костылей...

[Roman]

Олег: уважаемый вы или понтами захлебыветесь и потому не умеете слушать и слышать. 2 гифа, они разные по анимации. у одного цикл повторения 1 раз, у второго постоянный. Слепите мне спрайт с таких гифок) я лично вам заплачу)))

[Олег]

Роман: мысль изначально не верная, у вас три состояния, а не 2.

1 - развивается флаг (белый фон)
2 - спокойный (черный фон)
3 - что-то еще происходит (красный)

рисовальщик из меня не очень, но вот вам пример со спрайтом и кейфреймами (поскольку нельзя js и для вас это позволительно):
codepen.io/anon/pen/GpPmzv?editors=110

[Олег]

Роман: разумеется на красном фоне тоже может быть анимация, просто я её не рисовал...

[Олег]

Мне паказалось, или кто-то собирался мне денег дать?)

[Roman]

Олег: я же описывал задачу (хоть я ее сам и решил)
1,2 (которые вы описали) это один флаг, который сначала 1 раз колебался и остановился (он же потом спокойный), он не повторяется.
3 это анимационный флаг, на котором производится какое то действие (он появляется при наведении на первый - подмена при наведении мыши). Все решилось без явы, стандартными средствами.

[Roman]

Олег: так как вы решили задачу не верно, то и маржу не заработали)