[nick]Лизабет[/nick][status]Обращённый оборотень[/status][icon]https://forumupload.ru/uploads/001a/39/87/57/240521.jpg[/icon]
Куб: %dice%U2FsdGVkX19C1BaRLAKmGRQEM6pA+TlG26XnEgxqx0M=%dice%
Ожидаемое число: от 1 до 20 включительно.
[html]
<body>
<style>
/* Стили для таблицы с картинкой в качестве фона */
#randomTable {
border-collapse: collapse;
background-image: url("https://forumupload.ru/uploads/001a/39/87/57/411631.jpg"); /* Замените на ваш 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="Elizabeth">Лизабет</option>
<option value="Vibeke">Вибек</option>
<option value="William">Уильям</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 = {
Elizabeth: { imageUrl: "https://forumupload.ru/uploads/001a/39/87/57/374728.png", position: { row: 11, column: 17 } },
Vibeke: { imageUrl: "https://forumupload.ru/uploads/001a/39/87/57/354185.png", position: { row: 11, column: 18 } },
William: { imageUrl: "https://forumupload.ru/uploads/001a/39/87/57/357847.png", position: { row: 10, column: 21 } }
};
// Функция для генерации таблицы с изображениями и пустыми ячейками
function generateTable() {
const rowCount = 30; // Количество строк в таблице
const columnCount = 40; // Количество столбцов в таблице
// Получаем элемент таблицы
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)": 
": 
(+2)": 
(+2): 
