Итак, группа, надев снаряжение, отправилась на болото. И болото было не очень этому радо: густые ветви склонились над их головами, когда Милливент махала платочком их в след, выкрикивая не очень важные слова одобрения. А важно было то, что на болоте было неуютно. Сложная местность, по которой они шли, полностью отвечала своему названию, так и норовя утащить в глубину.
Вдруг, неосторожный шаг - и Рэд одной ногой скользит в болотную жижу по колено, застревая во влажной западне. Лишь внезапно протянутая рука Алларда, не давшему ему уйти туда глубже, предостерегла от ещё большей потери времени.
Шли они по лесу, высматривая присутствие живых, которого не наблюдалось. Милливент, конечно, говорила, что хоть болото большое, пересечь его можно за полдня, однако на самом деле всё было куда хуже. Влага, липкая атмосфера и духота, смешанная с неприятным запахом, сильно давила на нервы.
Вдруг, вдалеке, Северин заприметила кое-что. А конкретенее, кое-кого. Зеленоротое чудовище копалось в кустах, не успев заметить их самих.
[html]
<body>
<script>
// URL изображений и их позиции
let imageConfigs = {
СЕВЕРИН: { imageUrl: "https://forumupload.ru/uploads/001a/39/87/57/829747.png", position: { row: 36, column: 6 } },
АЛЛАРД: { imageUrl: "https://forumupload.ru/uploads/001a/39/87/57/295496.png", position: { row: 37, column: 7 } },
АЛЕКСАНДРА: { imageUrl: "https://forumupload.ru/uploads/001a/39/87/57/736387.png", position: { row: 37, column: 5 } },
РЭД: { imageUrl: "https://forumupload.ru/uploads/001a/39/87/57/242365.png", position: { row: 38, column: 6 } },
ГОБЛИН: { imageUrl: "https://forumupload.ru/uploads/001a/39/87/57/950925.png", position: { row: 26, column: 13 } },
};
function handleMouseOut() {
document.body.removeChild(tooltip);
}
// Функция для генерации таблицы с изображениями и пустыми ячейками
function generateTable() {
const rowCount = 40; // Количество строк в таблице
const columnCount = 20; // Количество столбцов в таблице
// Получаем элемент таблицы
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"; // Скрываем таблицу при повторном нажатии
}
}
let draggedItem; // Переменная для хранения перемещаемого элемента
document.getElementById('randomTable').addEventListener('mousedown', function (e) {
const cell = e.target.closest('td');
if (cell && cell.querySelector('img')) {
draggedItem = cell;
// Стилизуем ячейку для подчеркивания того, что она выбрана
draggedItem.style.position = 'absolute';
draggedItem.style.zIndex = 1000;
// Запоминаем начальные координаты мыши и ячейки
const offsetX = e.clientX - draggedItem.getBoundingClientRect().left;
const offsetY = e.clientY - draggedItem.getBoundingClientRect().top;
draggedItem.offsetX = offsetX;
draggedItem.offsetY = offsetY;
// Предотвращаем выделение текста во время перемещения
e.preventDefault();
}
});
document.getElementById('randomTable').addEventListener('mouseover', function (e) {
const cell = e.target.closest('td');
if (cell && cell.querySelector('img')) {
const rowIndex = cell.parentNode.rowIndex + 1;
const cellIndex = cell.cellIndex + 1;
// Создаем элемент для отображения координат
const tooltip = document.createElement('div');
tooltip.className = 'tooltip';
tooltip.innerHTML = `[${rowIndex}, ${cellIndex}]`;
tooltip.style.position = 'absolute';
tooltip.style.top = `${e.clientY + window.scrollY}px`;
tooltip.style.left = `${e.clientX + window.scrollX}px`;
document.body.appendChild(tooltip);
// Добавляем обработчик события для скрытия элемента при уходе с ячейки
cell.addEventListener('mouseout', function () {
document.body.removeChild(tooltip);
});
}
});
document.addEventListener('mousemove', function (e) {
if (draggedItem) {
const img = draggedItem.querySelector('img');
if (img) {
// Перемещаем ячейку так, чтобы ее центр находился в центре мыши
const mouseX = e.clientX - draggedItem.offsetX + draggedItem.offsetWidth / 2;
const mouseY = e.clientY - draggedItem.offsetY + draggedItem.offsetHeight / 2;
draggedItem.style.top = mouseY + 'px';
draggedItem.style.left = mouseX + 'px';
}
}
});
document.addEventListener('mouseup', function (e) {
if (draggedItem) {
// Определяем, в какую ячейку была перемещена ячейка
const targetCell = e.target.closest('td');
if (targetCell) {
// Обновляем позицию изображения в объекте imageConfigs
const selectedImage = draggedItem.querySelector('img').alt;
const rowIndex = targetCell.parentNode.rowIndex;
const cellIndex = targetCell.cellIndex;
imageConfigs[selectedImage].position.row = rowIndex + 1;
imageConfigs[selectedImage].position.column = cellIndex + 1;
// Перегенерируем таблицу с обновленными позициями
generateTable();
}
// Возвращаем стили к изначальным значениям
draggedItem.style.position = 'relative';
draggedItem.style.zIndex = 'auto';
draggedItem.style.top = '0';
draggedItem.style.left = '0';
// Удаляем обработчик события mouseout
draggedItem.removeEventListener('mouseout', handleMouseOut);
// Скрываем текущую подсказку
hideTooltip();
// Сбрасываем переменную
draggedItem = null;
}
});
function hideTooltip() {
const tooltip = document.querySelector('.tooltip');
if (tooltip) {
document.body.removeChild(tooltip);
}
}
// Показываем таблицу при загрузке страницы
generateTable();
</script>
<style>
/* Стили для таблицы с картинкой в качестве фона */
#randomTable {
border-collapse: collapse;
background-image: url("https://forumupload.ru/uploads/001a/39/87/57/727054.jpg"); /* Замените на ваш URL */
background-size: cover;
background-position: center;
background-repeat: no-repeat;
display: none; /* Скрываем таблицу по умолчанию */
}
#randomTable td {
width: 25px;
height: 25px;
padding: 0;
margin: 0;
position: relative;
}
#randomTable img {
display: block;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.controls {
margin-bottom: 10px;
}
.tooltip {
background-color: #fff;
border: 1px solid #ccc;
padding: 5px;
position: absolute;
z-index: 1000;
}
</style>
<button onclick="toggleTable()">Показать / Скрыть карту</button>
<table id="randomTable" border="1">
<!-- Таблица будет создана здесь -->
</table>
</body>
[/html]
- Подпись автора
Возник вопрос - обернись, и Тень нашепчет тебе ответ.
, дабы избежать любого проявления звука. И, таким образом, женщина желала достичь самой близкой точки к чудовищу (передвижение 30 футов по диагонали вправо), чтобы посмотреть на него поближе. Изучить. Дойдя до места, хладная затаилась за деревом.
