Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
 
Рейтинг 5.00/8: Рейтинг темы: голосов - 8, средняя оценка - 5.00
0 / 0 / 0
Регистрация: 22.07.2017
Сообщений: 20
1

Замена картинки при наведении

22.08.2017, 23:45. Показов 1662. Ответов 2
Метки нет (Все метки)

Добрый день. На JS никогда ничего не писал да и вообще новичок в программировании и скриптовых языках. Нужна помощь, вот кусок из кода index.html:
HTML5
1
2
3
4
5
6
7
<div class="social">
            <div class="tplace">
                <a href="https://twitter.com/barackobama" target="_blank"><img src="../static/img/tw-icon.png" alt="Twitter icon"></a>
            </div>
            <div class="fplace">
                <a href="https://www.facebook.com/barackobama/" target="_blank"><img src="../static/img/f-icon.png"></a>
            </div>
Вот эти две картинки tw-icon.png и f-icon.png должны просто сменяться другими картинками при наведении курсора мыши. Это возможно было бы сделать через CSS, если бы эта картинка не должна была быть еще и ссылкой. Да и не смог бы я background-image подвигать через padding. Ну и повторюсь, что этот код посреди сайта, вставить его в какое-нибудь начало нельзя.
0

Помощь в написании контрольных, курсовых и дипломных работ здесь.

Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
22.08.2017, 23:45
Ответы с готовыми решениями:

Описание картинки при наведении
Есть картинка, нужно при наведении вывести из бд описание. &lt;td class=&quot;item_box item_box1&quot;&gt;&lt;img...

Смена картинки при наведении
Здравствуйте, хочу реализовать кое-что, но, думаю, обычный onmouseover не поможет. Допустим, у...

Увеличение картинки при наведении
При наведении должен постепенно увеличится размер, тут сразу увеличивается(как будто картинка сразу...

Описание картинки при наведении
Доброе время суток. помогите сделать описание (из массива). При наведении на картинку получить...

2
1640 / 1306 / 639
Регистрация: 10.01.2015
Сообщений: 4,283
23.08.2017, 00:33 2
Лучший ответ Сообщение было отмечено chelovekfromhel как решение

Решение

Javascript
1
2
3
4
5
6
document.querySelector("div.tplace").querySelectorAll("img")[0].addEventListener("mouseover", function(){
  this.src = "путь";
});
document.querySelector("div.fplace").querySelectorAll("img")[0].addEventListener("mouseover", function(){
  this.src = "путь";
});
0
0 / 0 / 0
Регистрация: 22.07.2017
Сообщений: 20
23.08.2017, 01:54  [ТС] 3
Большое спасибо. А возможно сделать так, чтобы после того как курсор вне изображения, изображение возвращалось к исходному виду? Ну либо использовать еще один параметр, в котором указать путь к старому изображению.

Добавлено через 35 минут
Все, ничего не нужно больше. Большое спасибо еще раз!
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
23.08.2017, 01:54

Помощь в написании контрольных, курсовых и дипломных работ здесь.

Скрол картинки при наведении
Картинка из 2ух частей. Одна черно-белая (верхняя), другая цветная (нижняя). При наведении курсора...

Анимация картинки при наведении меню
Всем привет!Вот уже второй день мучаюсь: Как сделать чтобы при наведении на кнопки в меню у меня...

Увеличение части картинки при наведении
Всем привет. Есть довольно известный сайт http://www.alibaba.com там при покупке доступна картинка...

Увеличение картинки при наведении курсора
помогите пожалуста . при наведение должно увеличитса картина . что я не правильно сделал &lt;html&gt;...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.