[html]
<body>
<style>
/* Стили для таблицы с картинкой в качестве фона */
#randomTable {
border-collapse: collapse;
background-image: url("https://i.pinimg.com/originals/50/1c/34/501c342d2e1478a793fe0cac8fe2b25c.png"); /* Замените на ваш URL */
background-size: cover;
background-position: center;
background-repeat: no-repeat;
display: none; /* Скрываем таблицу по умолчанию */
}
#randomTable td {
width: 8px; /* Замените на желаемую ширину ячейки */
height: 8px; /* Замените на желаемую высоту ячейки */
padding: 0; /* Убираем отступы внутри ячейки */
position: relative;
}
#randomTable img {
width: 100%; /* Растягиваем изображение на всю ширину ячейки */
height: 100%; /* Растягиваем изображение на всю высоту ячейки */
position: absolute;
top: 0;
left: 0;
}
.controls {
margin-bottom: 10px;
}
</style>
<button onclick="toggleTable()">Показать / Скрыть карту</button>
<div class="controls">
<label for="imageSelect">✦:</label>
<select id="imageSelect">
<option value="Player1">Электротроль</option>
<option value="Player2">Оппонент</option>
</select>
<label for="verticalOffset">Ниже-выше:</label>
<input type="number" id="verticalOffset" value="0">
<label for="horizontalOffset">Вправо-влево:</label>
<input type="number" id="horizontalOffset" value="0">
<button onclick="applyOffsets()">Передвинуть</button>
</div>
<table id="randomTable" border="1">
<!-- Таблица будет создана здесь -->
</table>
<script>
// URL изображений и их позиции
let imageConfigs = {
Player1: { imageUrl: "https://forumupload.ru/uploads/001a/39/87/147/553934.png", position: { row: 18, column: 12 } },
Player2: { imageUrl: "http://forumupload.ru/uploads/001a/39/87/57/400351.png", position: { row: 18, column: 23 } }
};
// Функция для генерации таблицы с изображениями и пустыми ячейками
function generateTable() {
const rowCount = 35; // Количество строк в таблице
const columnCount = 35; // Количество столбцов в таблице
// Получаем элемент таблицы
const table = document.getElementById("randomTable");
// Очищаем таблицу, если она уже существует
table.innerHTML = "";
// Генерируем строки и столбцы с изображениями и пустыми ячейками
for (let i = 0; i < rowCount; i++) {
const row = table.insertRow();
for (let j = 0; j < columnCount; j++) {
const cell = row.insertCell();
// Проверяем, совпадает ли текущая ячейка с одной из указанных позиций изображений
for (const imageName in imageConfigs) {
const matchedConfig = imageConfigs[imageName];
if (i + 1 === matchedConfig.position.row && j + 1 === matchedConfig.position.column) {
// Создаем элемент <img> и вставляем его в ячейку
const img = document.createElement("img");
img.src = matchedConfig.imageUrl;
img.alt = imageName;
cell.appendChild(img);
}
}
}
}
// Показываем таблицу
table.style.display = "table";
}
// Функция для переключения видимости таблицы
function toggleTable() {
const table = document.getElementById("randomTable");
if (table.style.display === "none") {
generateTable(); // Показываем таблицу при первом открытии
} else {
table.style.display = "none"; // Скрываем таблицу при повторном нажатии
}
}
// Функция для применения смещений
function applyOffsets() {
const selectedImage = document.getElementById("imageSelect").value;
const verticalOffset = parseInt(document.getElementById("verticalOffset").value, 10) || 0;
const horizontalOffset = parseInt(document.getElementById("horizontalOffset").value, 10) || 0;
// Применяем смещения к позиции изображения
imageConfigs[selectedImage].position.row += verticalOffset;
imageConfigs[selectedImage].position.column += horizontalOffset;
generateTable(); // Перегенерируем таблицу с обновленными позициями
}
</script>
</body>
[/html]
- Подпись автора
Возник вопрос - подними голову, и Свет поделится мудростью.
▼▲▼▲▼▲▼
(+2): 
