Свернутый текст
[nick]Кваккари[/nick][status]Шаман[/status][icon]https://forumupload.ru/uploads/001a/39/87/57/980363.png[/icon]
- Всё в её рука-ах, - развёл лапами Кваккири, спокойно наблюдая за действиями девицы, - Я слежу за Ди-иким Волком... Он... его стоит бояться.
[html]
<body>
<script>
// URL изображений и их позиции
let imageConfigs = {
ЛИВИЯ: { imageUrl: "https://forumupload.ru/uploads/001a/39/87/57/821479.png", position: { row: 7, column: 16 } },
ИНДИР: { imageUrl: "https://forumupload.ru/uploads/001a/39/87/57/679761.png", position: { row: 6, column: 11 } },
КВАККАРИ: { imageUrl: "https://forumupload.ru/uploads/001a/39/87/57/980363.png", position: { row: 4, column: 9 } },
ВОЛК1: { imageUrl: "https://forumupload.ru/uploads/001a/39/87/57/46670.png", position: { row: 12, column: 14 } },
ВОЛК2: { imageUrl: "https://forumupload.ru/uploads/001a/39/87/57/46670.png", position: { row: 17, column: 9 } },
ВОЛК3: { imageUrl: "https://forumupload.ru/uploads/001a/39/87/57/46670.png", position: { row: 20, column: 15 } },
ОЛЕНЬ1: { imageUrl: "https://forumupload.ru/uploads/001a/39/87/57/521717.png", position: { row: 3, column: 11 } },
ОЛЕНЬ2: { imageUrl: "https://forumupload.ru/uploads/001a/39/87/57/521717.png", position: { row: 5, column: 8 } },
ОЛЕНЬ3: { imageUrl: "https://forumupload.ru/uploads/001a/39/87/57/521717.png", position: { row: 6, column: 13 } },
ОЛЕНЬ4: { imageUrl: "https://forumupload.ru/uploads/001a/39/87/57/521717.png", position: { row: 7, column: 15 } },
ОЛЕНЬ5: { imageUrl: "https://forumupload.ru/uploads/001a/39/87/57/521717.png", position: { row: 9, column: 10 } },
ОЛЕНЬ6: { imageUrl: "https://forumupload.ru/uploads/001a/39/87/57/521717.png", position: { row: 10, column: 17 } },
ОЛЕНЬ7: { imageUrl: "https://forumupload.ru/uploads/001a/39/87/57/521717.png", position: { row: 11, column: 13 } },
ОЛЕНЬ8: { imageUrl: "https://forumupload.ru/uploads/001a/39/87/57/521717.png", position: { row: 14, column: 11 } },
ОЛЕНЬ9: { imageUrl: "https://forumupload.ru/uploads/001a/39/87/57/521717.png", position: { row: 15, column: 7 } },
ОЛЕНЬ10: { imageUrl: "https://forumupload.ru/uploads/001a/39/87/57/521717.png", position: { row: 20, column: 10 } },
};
function handleMouseOut() {
document.body.removeChild(tooltip);
}
// Функция для генерации таблицы с изображениями и пустыми ячейками
function generateTable() {
const rowCount = 25; // Количество строк в таблице
const columnCount = 25; // Количество столбцов в таблице
// Получаем элемент таблицы
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);
}
}
// Скрываем таблицу при загрузке страницы
document.getElementById("randomTable").style.display = "none";
</script>
<style>
/* Стили для кнопки */
.toggle-button {
font-family: Trattatello, Arial, sans-serif; /* Шрифт Trattatello */
font-size: 18px;
padding: 10px 20px;
background-color: #4CAF50; /* Цвет фона */
color: white; /* Цвет текста */
border: none;
cursor: pointer;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin-top: 20px; /* Отступ сверху */
}
/* Стили для таблицы с картинкой в качестве фона */
#randomTable {
border-collapse: collapse;
background-image: url("https://forumupload.ru/uploads/001a/39/87/57/216407.jpg");
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 class="toggle-button" onclick="toggleTable()">Карта</button>
<table id="randomTable" border="1">
<!-- Таблица будет создана здесь -->
</table>
</body>
[/html]
- Подпись автора
Возник вопрос - обернись, и Тень нашепчет тебе ответ.
