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

@zaraizar · Регистрация: 26.02.2021

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

Привет!

Только начал изучать 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;
}

@klyapa · 07.11.2021, 20:48

Да в общем-то задача совсем не сложная. Нужны только адреса картинок и несколько пояснений:
1. Изображение должно меняться в div с классом container?
2. Для лучшей реализации желательно пунктам меню (ссылкам), установить атрибуты alt, с соответствующими названиями, и сами картинки желательно назвать в соответствии с пунктами меню. Это намного упростит задачу. Расширение изображений, тоже хорошо бы было одинаковым.
3. Давайте сюда список относительных адресов изображений. Я так понимаю их должно быть 8.

@zaraizar · 07.11.2021, 21:07 **[ТС]**

Спасибо, klyapa!

1. Да, фоновое изображение должно меняться в div с классом container.
2. alt к изображениям я позже прикручу обязательно и картинки все будут с одинаковым расширением. Пока это заготовка, и я пытаюсь решить основные задачи, полировать буду после

Насчет имен изображений понял, сделаю, как советуете.
3. Вот адрес картинки для раздела «People» - img/gens/gens.jpg

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

PS. Когда указатель мыши убирается с пункта меню/ссылки снова должно отображаться исходное фоновое изображение

@klyapa · 07.11.2021, 22:47

Я тут слегка подзабыл, что для ссылок атрибут 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>

@zaraizar · 08.11.2021, 20:50 **[ТС]**

Спасибо огромное! Завтра буду пробовать

Добавлено через 7 минут
Все работает! Еще раз спасибо огромное!

Новые блоги и статьи Все статьи Все блоги /
Загрузка 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 Решили писать научную статью с неким РОманом

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

@zaraizar 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

@zaraizar 0 / 0 / 0 Регистрация: 26.02.2021 Сообщений: 67
	08.11.2021, 20:50 [ТС]
	Спасибо огромное! Завтра буду пробовать Добавлено через 7 минут Все работает! Еще раз спасибо огромное! 0

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

Решение