map-editor / marker.html
soiz1's picture
Update marker.html
e11742b verified
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>画像ダウンロード</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
padding: 20px;
}
.image-box {
border: 2px solid #ddd;
border-radius: 10px;
padding: 15px;
background-color: #fff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
max-width: 300px;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.image-box:hover {
transform: translateY(-5px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
.image-box img {
height: 100px;
width: auto;
border-radius: 5px;
object-fit: cover;
}
.download-button, .copy-button {
margin-top: 10px;
display: inline-block;
padding: 12px 25px;
background-color: #4CAF50;
color: white;
text-decoration: none;
border-radius: 25px;
font-size: 16px;
transition: background-color 0.3s ease, transform 0.2s ease;
}
.copy-button{
background-color: #4287f5 !important;
cursor: pointer;
}
.download-button:hover, .copy-button:hover {
background-color: #45a049;
transform: translateY(-2px);
}
#loading {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.8);
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
color: #333;
z-index: 1000;
transition: opacity 1s ease, visibility 1s ease; /* フェードアウトのためのスタイル */
}
#loading.hidden {
opacity: 0;
visibility: hidden;
}
</style>
</head>
<body>
<!-- ローディング表示 -->
<div id="loading">Loading...</div>
<script>
let number = 60; // 画像の数
let imagesLoaded = 0; // 読み込まれた画像の数
for (let i = 1; i <= number; i++) {
let imageBox = document.createElement('div');
imageBox.className = 'image-box';
let img = document.createElement('img');
img.src = location.origin + "/marker/" + i + ".png";
img.alt = "画像";
img.onload = function() {
imagesLoaded++;
if (imagesLoaded === number) {
setTimeout(function() {
document.getElementById('loading').classList.add('hidden');
}, 500);
}
};
// ダウンロードリンクを作成(ループ内に配置)
let downloadLink = document.createElement('a');
downloadLink.href = img.src; // 画像のURLを直接指定
downloadLink.download = 'marker_' + i + '.png';
downloadLink.className = 'download-button';
downloadLink.textContent = 'ダウンロード';
// コピーリンクボタンを作成(ループ内に配置)
let copyButton = document.createElement('button');
copyButton.className = 'copy-button';
copyButton.textContent = 'URLをコピー';
copyButton.onclick = function() {
navigator.clipboard.writeText(img.src).then(function() {
alert('URLがコピーされました: \n' + img.src);
}).catch(function(err) {
alert('コピーに失敗しました: ' + err);
});
};
// 各要素を `imageBox` に追加
imageBox.appendChild(img);
imageBox.appendChild(document.createElement('br'));
imageBox.appendChild(downloadLink);
imageBox.appendChild(document.createElement('br'));
imageBox.appendChild(copyButton);
// `body` に `imageBox` を追加
document.body.appendChild(imageBox);
}
</script>
</body>
</html>