[html]
<body>
<style>
/* Стили для таблицы с картинкой в качестве фона */
#randomTable {
border-collapse: collapse;
background-image: url("https://forumupload.ru/uploads/001a/39/87/183/824263.png"); /* Замените на ваш URL */
background-size: cover;
background-position: center;
background-repeat: no-repeat;
display: none; /* Скрываем таблицу по умолчанию */
}
#randomTable td {
width: 8px;
height: 8px;
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>
<script>
// URL изображений и их позиции
let imageConfigs = {
Player1: { imageUrl: "https://forumupload.ru/uploads/001a/39/87/57/415495.png", position: { row: 13, column: 17 } },
Player2: { imageUrl: "https://forumupload.ru/uploads/001a/39/87/57/271058.png", position: { row: 13, column: 16 } },
Player3: { imageUrl: "https://forumupload.ru/uploads/001a/39/87/57/886797.png", position: { row: 17, column: 10 } },
Player4: { imageUrl: "https://forumupload.ru/uploads/001a/39/87/183/626073.webp", position: { row: 16, column: 10 } },
Player5: { imageUrl: "https://forumupload.ru/uploads/001a/39/87/57/157487.png", position: { row: 15, column: 9 } },
Player6: { imageUrl: "https://forumupload.ru/uploads/001a/39/87/57/157487.png", position: { row: 15, column: 11 } }
};
function handleMouseOut() {
document.body.removeChild(tooltip);
}
// Функция для генерации таблицы с изображениями и пустыми ячейками
function generateTable() {
const rowCount = 20; // Количество строк в таблице
const columnCount = 29; // Количество столбцов в таблице
// Получаем элемент таблицы
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>
</body>
[/html]
Отредактировано Умбрадис (05.02.2024 16:49)
- Подпись автора
Возник вопрос - обернись, и Тень нашепчет тебе ответ.
