Помогите пожалуйста, как внутри div разместить рисунок a.jpg, 3 кнопки, меняющие свойство src
тега img
на a.jpg
, m.jpg
, n.jpg
(первая кнопка расположена в правом нижнем углу, вторая - левый нижний угол, третья находится между ними.) с помощью JavaScript.
-
это на js надо сделать ?– Резидент Казахстана6 апр 2020 в 6:44
-
Да, это pзадание из раздела JS– JKaty6 апр 2020 в 6:58
Добавить комментарий
|
1 ответ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Change Image JKaty</title>
</head>
<body>
<div></div>
<script language="JavaScript">
document.addEventListener('DOMContentLoaded', function () { // Ждём загрузки документа
let div = document.querySelector('div'); // Получаем div
let img = document.createElement('img'); // Создаём изображение
img.src = 'a.jpg'; // Добавляем картинку
img.style.width = '100%'; // Задаём ширину картинки 100%
let table = document.createElement('table');
table.style.width = '100%';
let but1 = document.createElement('button'); // Создаём кнопку 1
but1.className = 'buttons'; // Задаём нужный класс кнопке если надо
but1.innerText = 'Первая картинка'; // Задаём текст кнопки
let tr = document.createElement('tr');
tr.style.width = '100%';
let td1 = document.createElement('td');
td1.style.textAlign = 'right';
let but2 = document.createElement('button'); // Создаём кнопку 2
but2.className = 'buttons';// Задаём нужный класс кнопке если надо
but2.innerText = 'Вторая картинка'; // Задаём текст кнопки
let td2 = document.createElement('td');
let but3 = document.createElement('button'); // Создаём кнопку 3
but3.className = 'buttons';// Задаём нужный класс кнопке если надо
but3.innerText = 'Третья картинка'; // Задаём текст кнопки
let td3 = document.createElement('td');
td3.style.textAlign = 'center';
div.appendChild(img); //Добавляем в div изображение
td3.appendChild(but3);
td2.appendChild(but2);
td1.appendChild(but1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td1);
table.appendChild(tr);
div.appendChild(table);
but1.onclick = function () { // При нажатии кнопки 1
img.src = 'a.jpg'; // Меняем src картинки
};
but2.onclick = function () { // При нажатии кнопки 2
img.src = 'm.jpg'; // Меняем src картинки
};
but3.onclick = function () { // При нажатии кнопки 3
img.src = 'n.jpg'; // Меняем src картинки
};
})
</script>
</body>
</html>
Пример с картинками для демонстрации + позиции кнопок согласно описанию:
document.addEventListener('DOMContentLoaded', function () { // Ждём загрузки документа
let div = document.querySelector('div'); // Получаем div
let img = document.createElement('img'); // Создаём изображение
img.src = 'https://www.yggdrasilgaming.com/wp-content/uploads/2019/01/cazinocosmos_site_background.jpg'; // Добавляем картинку
img.style.width = '100%'; // Задаём ширину картинки 100%
let table = document.createElement('table');
table.style.width = '100%';
let but1 = document.createElement('button'); // Создаём кнопку 1
but1.className = 'buttons'; // Задаём нужный класс кнопке если надо
but1.innerText = 'Первая картинка'; // Задаём текст кнопки
let tr = document.createElement('tr');
tr.style.width = '100%';
let td1 = document.createElement('td');
td1.style.textAlign = 'right';
let but2 = document.createElement('button'); // Создаём кнопку 2
but2.className = 'buttons';// Задаём нужный класс кнопке если надо
but2.innerText = 'Вторая картинка'; // Задаём текст кнопки
let td2 = document.createElement('td');
let but3 = document.createElement('button'); // Создаём кнопку 3
but3.className = 'buttons';// Задаём нужный класс кнопке если надо
but3.innerText = 'Третья картинка'; // Задаём текст кнопки
let td3 = document.createElement('td');
td3.style.textAlign = 'center';
div.appendChild(img); //Добавляем в div изображение
td3.appendChild(but3);
td2.appendChild(but2);
td1.appendChild(but1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td1);
table.appendChild(tr);
div.appendChild(table);
but1.onclick = function () { // При нажатии кнопки 1
img.src = 'https://www.yggdrasilgaming.com/wp-content/uploads/2019/01/cazinocosmos_site_background.jpg'; // Меняем src картинки
};
but2.onclick = function () { // При нажатии кнопки 2
img.src = 'data:image/jpeg;base64,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'; // Меняем src картинки
};
but3.onclick = function () { // При нажатии кнопки 3
img.src = 'data:image/jpeg;base64,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'; // Меняем src картинки
};
})
<div></div>
-
А как теперь соединить это с HTML документом? Или как отдельный файл сохранять?– JKaty6 апр 2020 в 7:15
-
@JKaty Добавил ещё вариант с позиционированием кнопок согласно описанию. Вы можете либо создать новый документ, либо вставить в существующий. Чтобы вставить в существующий документ - Вам необходимо лишь добавить
js
код. И в коде найти тотdiv
в который вставляете. Сейчасdocument.querySelector('div');
ищет первый существующийdiv
в документе и в него вставляет. Вы можете найти элемент по классуdocument.querySelector('.div');
или поid
document.querySelector('#div');
В примере классdiv
и id =div
соответственно. 6 апр 2020 в 7:24 -
1@JKaty оберните JS код из ответа в теги <script> .... </script> и скопируйте в HTML, желательно в конец страницы 6 апр 2020 в 7:27
-
Хорошо, спасибо большое, а то пытаюсь теперь открыть через браузер, а мне ошибку выдают– JKaty6 апр 2020 в 7:28
-
@JKaty Первый пример заменил на документ
html
. Можете просто теперь создать файл с расширением.html
и вставить туда разметку с кодом. 6 апр 2020 в 7:33