Помогите с программированием

Question

Помогите с программированием

Елизавета Коноплёва Ученик (34), на голосовании 12 месяцев назад

Задание № 1
Cоздайте страницу HTML. В центре поместите заголовок, под ним рисунок. Если навести мышь на изображение, оно должно меняться на другое и восстанавливаться, когда курсор уходит.

Задание № 2
Переделайте задание № 1, создав две функции для смены картинки.

Answer 1

Задание № 1:
Вот пример кода для создания страницы HTML с изображением, которое меняется при наведении мыши:

html
<!DOCTYPE html>
<html>
<head>
<style>
#image {
display: block;
margin: 0 auto;
text-align: center;
}
</style>
</head>
<body>
<h1>Заголовок</h1>
<img id="image" src="начальное_изображение.jpg" alt="Изображение" />

<script>
var image = document.getElementById("image");
var originalSrc = image.src;
var newSrc = "новое_изображение.jpg";

image.addEventListener("mouseover", function() {
image.src = newSrc;
});

image.addEventListener("mouseout", function() {
image.src = originalSrc;
});
</script>
</body>
</html>

Задание № 2:
Вот пример кода, который использует две функции для смены картинки:

html
<!DOCTYPE html>
<html>
<head>
<style>
#image {
display: block;
margin: 0 auto;
text-align: center;
}
</style>
</head>
<body>
<h1>Заголовок</h1>
<img id="image" src="начальное_изображение.jpg" alt="Изображение" />

<script>
var image = document.getElementById("image");
var originalSrc = image.src;
var newSrc = "новое_изображение.jpg";

image.addEventListener("mouseover", changeImage);
image.addEventListener("mouseout", restoreImage);

function changeImage() {
image.src = newSrc;
}

function restoreImage() {
image.src = originalSrc;
}
</script>
</body>
</html>

В обоих примерах, замените "начальное_изображение.jpg" и "новое_изображение.jpg" на пути к вашим изображениям.