Html 使用CSS和javascript在地图上标记

我正在制作一个非常简单的页面，需要执行以下操作：

将有一个地图，这是一个div中的背景图像，并且将有一些可单击的图像分布在地图上，每个图像都位于自己的div中。单击这些图像时，应该会使地图上的一些标记出现或消失，以指示可以在地图上找到这些标记的位置

它不应该是花哨的，它应该是有效的，而且很快就可以完成。我没有经验，时间也不多。你有什么建议

我试图找到一种只使用css的方法，但我能做的最好的是一种非常原始和不切实际的方法，而不是简单和优雅的方法。如果可能的话，我希望避免使用任何库。

这样做

document.getElementById('a1').addEventListener('click', toggle);
function toggle(a){
document.getElementById("i1").style.display='block';
setTimeout(function(){
document.getElementById("i1").style.display='none';
},500);
}

小提琴：