<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<title>āĻāĻāĻি āĻāĻŽেāĻ, āĻĒাঁāĻāĻি āĻ˛িংāĻ</title>
<style>
body {
font-family: Arial;
padding: 20px;
text-align: center;
}
input[type="text"], input[type="file"] {
margin: 10px 0;
width: 80%;
padding: 8px;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
img {
max-width: 300px;
margin-top: 20px;
cursor: pointer;
}
textarea {
width: 90%;
height: 150px;
margin-top: 20px;
}
</style>
</head>
<body>
<h2>đ¸ āĻāĻāĻি āĻāĻŽেāĻে āĻ্āĻ˛িāĻ āĻāĻ°āĻ˛ে ā§ĢāĻি āĻ˛িংāĻ āĻুāĻ˛āĻŦে</h2>
<input type="file" id="imageInput"><br><br>
<!-- āĻĒাঁāĻāĻি āĻ˛িংāĻ āĻāĻ¨āĻĒুāĻ -->
<div>
<input type="text" id="link1" placeholder="đ āĻ˛িংāĻ 1 āĻĻিāĻ¨"><br>
<input type="text" id="link2" placeholder="đ āĻ˛িংāĻ 2 āĻĻিāĻ¨"><br>
<input type="text" id="link3" placeholder="đ āĻ˛িংāĻ 3 āĻĻিāĻ¨"><br>
<input type="text" id="link4" placeholder="đ āĻ˛িংāĻ 4 āĻĻিāĻ¨"><br>
<input type="text" id="link5" placeholder="đ āĻ˛িংāĻ 5 āĻĻিāĻ¨"><br>
<input type="text" id="link1" placeholder="đ āĻ˛িংāĻ 6 āĻĻিāĻ¨"><br>
<input type="text" id="link2" placeholder="đ āĻ˛িংāĻ 7 āĻĻিāĻ¨"><br>
<input type="text" id="link3" placeholder="đ āĻ˛িংāĻ 8 āĻĻিāĻ¨"><br>
<input type="text" id="link4" placeholder="đ āĻ˛িংāĻ 9 āĻĻিāĻ¨"><br>
<input type="text" id="link5" placeholder="đ āĻ˛িংāĻ 10 āĻĻিāĻ¨"><br>
</div>
<button onclick="generateClickableImage()">Create Clickable Image</button>
<div id="output"></div>
<script>
function generateClickableImage() {
const file = document.getElementById('imageInput').files[0];
const links = [
document.getElementById('link1').value,
document.getElementById('link2').value,
document.getElementById('link3').value,
document.getElementById('link4').value,
document.getElementById('link5').value
];
if (!file || links.some(link => !link)) {
alert("āĻĻā§া āĻāĻ°ে āĻāĻŽেāĻ āĻāĻŦং ā§ĢāĻি āĻ˛িংāĻ āĻĻিāĻ¨!");
return;
}
const reader = new FileReader();
reader.onload = function (e) {
const base64 = e.target.result;
const html = `
<img src="${base64}" onclick="openAllLinks()" alt="Clickable Image">
<script>
function openAllLinks() {
${links.map(link => `window.open('${link}', '_blank');`).join('\n')}
}
<\/script>
`;
document.getElementById('output').innerHTML = `
<h3>✅ āĻ¨িāĻেāĻ° āĻোāĻĄāĻি āĻāĻĒি āĻāĻ°ে āĻāĻĒāĻ¨াāĻ° āĻā§েāĻŦāĻ¸াāĻāĻে āĻĒেāĻ¸্āĻ āĻāĻ°ুāĻ¨:</h3>
<textarea readonly>${html}</textarea>
<div>${html}</div>
`;
};
reader.readAsDataURL(file);
}
</script>
</body>
</html>
.jpeg)
0 Comments