57 lines
1.2 KiB
HTML
57 lines
1.2 KiB
HTML
<html>
|
|
|
|
<head>
|
|
<title>Annotations</title>
|
|
<style>
|
|
body {
|
|
background: darkgray;
|
|
}
|
|
|
|
ul {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
li {
|
|
display: inline-block;
|
|
;
|
|
}
|
|
|
|
img {
|
|
/* width: 400px; */
|
|
background: white;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
{% for tag in index.tags %}
|
|
<h2>{{tag}}</h2>
|
|
<ul>
|
|
{% for annotation in index.tags[tag] %}
|
|
<li><img src="/annotation/{{ annotation.id }}.svg" data-audio="/annotation/{{ annotation.id }}.mp3"></li>
|
|
{% end %}
|
|
</ul>
|
|
{% end %}
|
|
<!-- <ul>
|
|
{% for annotation in index.annotations %}
|
|
<li>{{ annotation }}</li>
|
|
{% end %}
|
|
</ul> -->
|
|
</body>
|
|
<script>
|
|
let images = document.querySelectorAll('[data-audio]');
|
|
for (const image of images) {
|
|
const audio = new Audio(image.dataset.audio);
|
|
console.log(image, audio);
|
|
image.addEventListener('mouseover', (e) => {
|
|
audio.play();
|
|
});
|
|
image.addEventListener('mouseout', (e) => {
|
|
audio.pause();
|
|
audio.currentTime = 0;
|
|
});
|
|
}
|
|
</script>
|
|
|
|
</html> |