Создание небольшой страницы с изображением с 3-мя кнопками
Я хочу создать небольшую веб-страницу с 3 кнопками, например, с фоновым изображением:
При наведении курсора на одну из кнопок изображение должно измениться с помощью js.
Как лучше всего добиться этого эффекта? Я пробовал с background-image, но когда изображение меняется, оно не меняется мгновенно. Сначала страница становится белой, я не знаю почему.
Спасибо.
///редактировать:
document.addEventListener("DOMContentLoaded", function()
{
document.querySelector(".gaming").addEventListener("mouseover", function()
{
document.querySelector(".container").style.backgroundImage = 'url(1.png)';
});
document.querySelector(".media").addEventListener("mouseover", function()
{
document.querySelector(".container").style.backgroundImage = 'url(2.png)';
});
document.querySelector(".forum").addEventListener("mouseover", function()
{
document.querySelector(".container").style.backgroundImage = 'url(3.png)';
});
});
.container {
position: relative;
height: 1080px;
}
.gaming
{
position: absolute;
height:100%;
}
.media
{
}
.forum {
position: absolute;
}<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>Portal</title>
<script src = "js.js"></script>
<link rel = "stylesheet" type = "text/css" href = "css.css">
<link rel = "stylesheet" type = "text/css" href = "reset.css">
</head>
<body>
<div class = "container">
<image class = "image-portal"></image>
<a class = "gaming">1</a>
<a class = "media">2</a>
<a class = "forum">3</a>
</div>
</body>
</html>Вот как я пытался это сделать. Сейчас пытаюсь расположить кнопки. Должен ли я изменить src изображения вместо добавления backgroundImage? (также я думаю, что мне тоже нужен обработчик для mouseleave).
Мне не нужны люди, которые пишут за меня код. Я просто хочу знать, как можно добиться этого эффекта с помощью передовой практики. Попробую сам закодировать.
Это просто переключение между одним изображением и другим или вы собираетесь переключаться на несколько изображений при наведении курсора?
Пожалуйста, поймите, что много людей приходят сюда и пишут вопросы, подобные этому, ожидая, что люди напишут это за них. В вашем вопросе нет того, что вы пробовали. Трудно помочь вам, когда мы не видим ваш код.
Я добавил код. Мне просто нужны были идеи, как это сделать лучше всего, а не код. Спасибо хоть.
Для эффекта наведения при отображении изображений я бы рекомендовал даже не использовать JS так, как вы показываете выше. Просто используйте селектор CSS :hover вместо того, чтобы каждый раз запрашивать DOM для класса.
Это было бы лучше. Я не знал, почему не подумал об этом. Большое спасибо!
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Я думаю, вы должны загружать изображения при запуске страницы. Вы можете создать массив, а затем загрузить изображения из этого массива.
Вы можете скачать изображения заранее без кода, просто поместите несколько тегов <link rel = "preload"> в заголовок, например:
<head>
<link rel = "preload" href = "1.png" as = "image" type = "image/png" />
<link rel = "preload" href = "2.png" as = "image" type = "image/png" />
<link rel = "preload" href = "3.png" as = "image" type = "image/png" />
</head>
Дополнительная информация: https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content
Это помогло. Спасибо!
Я не думаю, что это лучшее место, чтобы побудить людей написать ваш код за вас. Вы пробовали что-нибудь, что могли бы нам показать?