<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive Image with Sound</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.image-grid {
position: relative;
display: grid;
grid-template-columns: repeat(5, 100px);
grid-template-rows: repeat(5, 100px);
gap: 0;
}
.image-grid div {
position: relative;
width: 100px;
height: 100px;
background-image: url(‘foto1.jpg'); /* Replace with your image path */
background-size: 500px 500px;
transition: background-color 0.3s;
}
.image-grid div:hover {
background-color: rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body>
<div class="image-grid">
<!-- Generate 25 squares -->
<script>
const grid = document.querySelector('.image-grid');
for (let i = 0; i < 25; i++) {
const div = document.createElement('div');
div.style.backgroundPosition = `${-(i % 5) * 100}px ${-Math.floor(i / 5) * 100}px`;
div.addEventListener('mouseenter', () => {
const audio = new Audio(‘test1.mp3'); // Replace with your sound file
audio.play();
});
grid.appendChild(div);
}
</script>
</div>
</body>
</html>