Форум программистов, компьютерный форум, киберфорум
JavaScript для начинающих
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.50/8: Рейтинг темы: голосов - 8, средняя оценка - 4.50
0 / 0 / 0
Регистрация: 26.02.2021
Сообщений: 67

Смена фоновой картинки при наведении мыши на пункт меню/ссылку

07.11.2021, 20:11. Показов 1698. Ответов 4

Студворк — интернет-сервис помощи студентам
Привет!

Только начал изучать js, и пришлось решать слишком сложную для мня задачу. Поэтому очень надеюсь на вашу помощь, подсказки, указания направления )

Тема такая: есть сайт-портфолио фотографа, на главной странице которого фоном стоит фото. Есть выпадающее меню с ссылками на тематические разделы сайта. Надо сделать так, чтобы при наведении указателя мыши на пункт меню, менялось фоновое изображение главной страницы (должно подставляться фото из соответствующего раздела).

В сети нашел несколько вариантов решения подобной проблемы. Но то ли проблемы были действительно только подобными, то ли мне не хватает знаний, чтобы адаптировать решения под свой конкретный запрос...

В общем, очень надеюсь, что кто-то сможет подсказать решение задачи или дать направление, в котором рыть.

В любом случае, всем ответившим большое спасибо!

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html lang="en-EN">
 
    <head>
            <title>Pavel Kravets</title>
        <meta http-equiv="Content-type" content="text/html" charset="utf-8">
        <link href="css/style.css" rel="stylesheet" />
    </head>
    
    <body>
 
        <div class="container">
            
            
            <span id="name">Pavel Kravets</span>
            
            <div class="dropdown">
                <button class="mainmenubtn">Menu</button>
                <div class="dropdown-child">
                  <a href="#">People</a>
                  <a href="#">Landscapes</a>
                  <a href="#">Places</a>
                  <a href="#">Animals</a>
                  <a href="#">Events</a>
                  <a href="#">Macro</a>
                  <a href="#">Street</a>
                  <a href="#">Black&White</a>
                </div>
              </div>
 
        </div>
    
    </body>
</html>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
/* Embedding the font roboto.thin*/
@font-face {
    font-family: 'roboto.thin';
    src: url('../fonts/roboto.thin/roboto.thin.eot');
    src: local('☺'), url('fonts/roboto.thin/roboto.thin.woff') format('woff'), url('fonts/roboto.thin/roboto.thin.ttf') format('truetype'), url('fonts/roboto.thin/roboto.thin.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
 
/* Embedding the font JosefinSans-Regular*/
@font-face {
    font-family: 'Conv_JosefinSans-Regular';
    src: url('../fonts/JosefinSans-Regular/JosefinSans-Regular.eot');
    src: local('☺'), url('../fonts/JosefinSans-Regular/JosefinSans-Regular.woff') format('woff'), url('../fonts/JosefinSans-Regular/JosefinSans-Regular.ttf') format('truetype'), url('../fonts/JosefinSans-Regular/JosefinSans-Regular.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
 
body {
    margin: 0;
}
 
.container {
    background-color: #ffffff;
    text-align: left;
    display: block;
    background-image: url(../img/logo/monks.jpg);
    background-size: cover;
    height: 100vh;
}
 
#mainpic {
    height: 100vh;
    width: auto;
}
 
#menu {
    color: rgba(230, 230, 230, 0.8);
    font-family: 'Conv_JosefinSans-Regular', sans-serif;
    font-size: 3em;
    left: 800px;
    top: 37px;
    position: fixed;
    word-spacing: 10px;
}
 
#here {
    color: rgba(230, 230, 230, 1);
    font-family: 'Conv_JosefinSans-Regular', sans-serif;
}
 
#name {
    color: rgba(230, 230, 230, 1);
    font-family: 'Conv_JosefinSans-Regular', sans-serif;
    font-size: 2em;
    left: 70px;
    top: 30px;
    position: fixed;
    letter-spacing:  10px;
    word-spacing: 15px;
}
 
#bar {
    left: 120px;
    top: 30px;
    position: fixed;
    opacity: 0.5;
}
 
.mainmenubtn {
    background: transparent;
    color: white;
    border: none;
    cursor: pointer;
    font-family: 'Conv_JosefinSans-Regular', sans-serif;
    font-size: 1.3em;
    font-weight: 500;
    padding: 100px 0 0 70px;
}
 
.mainmenubtn:hover {
    background: transparent;
}
    
.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-child {
    display: none;
}
 
.dropdown-child a {
    color: white;
    font-family: 'Conv_JosefinSans-Regular', sans-serif;
    font-size: 1.3em;
    font-weight: 500;
    padding: 15px 0 0 70px;
    text-decoration: none;
    display: block;
}
 
.dropdown:hover .dropdown-child {
    display: block;
    
}
 
.dropdown-child a:hover {
     text-transform: uppercase;
}
0
Лучшие ответы (1)
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
07.11.2021, 20:11
Ответы с готовыми решениями:

Изменение фона страницы при наведении курсора на пункт (ссылку) меню
Доброго времени суток! Подскажите, пожалуйста, как сделать так, чтобы при наведении курсора на пункт (ссылку) меню фон страницы...

Звук при наведении мыши на пункт меню
Мне нужно, чтобы при наведении мыши на пункт меню MaimMenu1 проигрывался звук. Желательно сразу прописать код для всех пунктов меню, а не...

Смена положения картинки при наведении на ссылку
Дана текстовая ссылка с картинкой (изогнутая линия). Изображение располагается над ссылкой. Нужно сделать так, чтобы при наведении...

4
 Аватар для klyapa
3503 / 1267 / 429
Регистрация: 24.07.2016
Сообщений: 1,890
07.11.2021, 20:48
Да в общем-то задача совсем не сложная. Нужны только адреса картинок и несколько пояснений:
1. Изображение должно меняться в div с классом container?
2. Для лучшей реализации желательно пунктам меню (ссылкам), установить атрибуты alt, с соответствующими названиями, и сами картинки желательно назвать в соответствии с пунктами меню. Это намного упростит задачу. Расширение изображений, тоже хорошо бы было одинаковым.
3. Давайте сюда список относительных адресов изображений. Я так понимаю их должно быть 8.
1
0 / 0 / 0
Регистрация: 26.02.2021
Сообщений: 67
07.11.2021, 21:07  [ТС]
Спасибо, klyapa!

1. Да, фоновое изображение должно меняться в div с классом container.
2. alt к изображениям я позже прикручу обязательно и картинки все будут с одинаковым расширением. Пока это заготовка, и я пытаюсь решить основные задачи, полировать буду после Насчет имен изображений понял, сделаю, как советуете.
3. Вот адрес картинки для раздела «People» - img/gens/gens.jpg

Надеюсь, если вы подскажете, как сделать то что нужрно на примере одного раздела, с другими я смогу разобраться, сделаю по аналогии ))

PS. Когда указатель мыши убирается с пункта меню/ссылки снова должно отображаться исходное фоновое изображение
0
 Аватар для klyapa
3503 / 1267 / 429
Регистрация: 24.07.2016
Сообщений: 1,890
07.11.2021, 22:47
Лучший ответ Сообщение было отмечено zaraizar как решение

Решение

Я тут слегка подзабыл, что для ссылок атрибут alt не родной )

1. Все картинки находятся по адресу img/gens с расширением .jpg
2. Названия соответствуют значениям в атрибутах data-img
PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<div class="container">
 
  <span id="name">Pavel Kravets</span>
 
  <div class="dropdown">
    <button class="mainmenubtn">Menu</button>
    <div class="dropdown-child">
      <a href="#" data-img="people">People</a>
      <a href="#" data-img="landscapes">Landscapes</a>
      <a href="#" data-img="places">Places</a>
      <a href="#" data-img="animals">Animals</a>
      <a href="#" data-img="events">Events</a>
      <a href="#" data-img="mcro">Macro</a>
      <a href="#" data-img="street">Street</a>
      <a href="#" data-img="blackwhite">Black&amp;White</a>
    </div>
  </div>
 
</div>
 
<script>
    const container = document.querySelector('.container'),
          boxLinks = document.querySelector('.dropdown-child');
 
    boxLinks.addEventListener('mouseover', e => {
        if(e.target.tagName !== 'A') return;
        container.style.backgroundImage = `url(img/gens/${e.target.dataset.img}.jpg)`;
    });
    boxLinks.addEventListener('mouseout', e => {
        if(e.target.tagName !== 'A') return;
        container.style.backgroundImage = '';
    });
</script>
1
0 / 0 / 0
Регистрация: 26.02.2021
Сообщений: 67
08.11.2021, 20:50  [ТС]
Спасибо огромное! Завтра буду пробовать

Добавлено через 7 минут
Все работает! Еще раз спасибо огромное!
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
08.11.2021, 20:50
Помогаю со студенческими работами здесь

Событие mouseout при наведении мыши на пункт меню - как избавиться?
Делаю обычное выпадающее меню. При наведении мыши на заголовок меню оно выпадает, при onmouseout убирается. Проблема в том, что...

При наведении курсора мыши на пункт меню меняется цветовая палитра
Напишем сценарий, реализующий вертикальное графическое меню. При наведении курсора мыши на пункт меню меняется цветовая палитра,...

Меню - смена фона при наведении мыши
Делаю меню &lt;div id=&quot;menu&quot;&gt; &lt;p&gt;Навигация&lt;/p&gt; &lt;a href=&quot;&quot; &gt;111&lt;/a&gt;&lt;br /&gt; &lt;a href=&quot;&quot; &gt;222&lt;/a&gt;&lt;br /&gt; &lt;a...

Смена картинки при наведении в меню
Здравствуйте, подскажите пожалуйста, как бы сделать так, чтобы в этом меню, при наведении на один из элементов li, менялась картинка? ...

Смена цвета картинки (SVG) и ссылки (буквы) при наведении курсора мыши
Здравствуйте, я никогда до этого не работал с svg. У меня есть ссылка &lt;a href=&quot;http://gmail@gmail.com&quot;...


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

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Новые блоги и статьи
Загрузка PNG-файла с альфа-каналом с помощью библиотеки SDL3_image на Android
8Observer8 27.01.2026
Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
влияние грибов на сукцессию
anaschu 26.01.2026
Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android
8Observer8 26.01.2026
Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .
Установка Android SDK, NDK, JDK, CMake и т.д.
8Observer8 25.01.2026
Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .
Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf
8Observer8 25.01.2026
Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .
Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly
8Observer8 24.01.2026
Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
моя боль
iceja 24.01.2026
Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .
Модель сукцессии микоризы
anaschu 24.01.2026
Решили писать научную статью с неким РОманом
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru