如何使用CSS / Javascript在不同位置添加100多个可点击图像？

Question

我是HTML / CSS / Javascript的初学者。但是我确实有使用Android Native UI，Layouts，Adapters，Views等的经验。

所以我有一个使用相同图像/图标进行座位的场地。现在我需要将所有相对于场地的位置定位。这基本上是您传统的座位图UI。

例如，硬编码的css代码如下所示：

.parent {
position: relative;
top: 0;
left: 0;

}
.image1 {
height:auto;
width: auto;
max-width: 1080px;
max-height: 1080px;
}
.image2 {
position: absolute;
top: 30px;
left: 70px;
height: auto; 
width: auto; 
max-width: 60px; 
max-height: 60px;
}
.image3 {
position: absolute;
top: 30px;
left: 140px;
height: auto; 
width: auto; 
max-width: 60px; 
max-height: 60px;
}

....


.image100{
position: absolute;
top: 1000px;
left: 1000px;
height: auto; 
width: auto; 
max-width: 60px; 
max-height: 60px;
}

这里image1将是背景（场地），然后image2-100将是场地的不同位置和不同方向的所有不同座位。做这个硬编码似乎是一个非常不直观的方法。

但是，我不能动态加载它，因为如果我有10个不同的场地，它们都会有不同的布局，然后每个座位需要以不同的方式定位。

我可以使用任何类型的拖放绘图应用程序吗？基本上我只需要一个可以处理100个自定义图标座位的UI，其中包含100个唯一ID而没有性能问题（这取决于服务器，但我不想以对服务器来说很重要的方式对其进行编码）。

我只是使用这些图像让他们在点击时返回一个ID，我将发布到我的服务器并“预订”它。

Answer 1

我的建议：

让您的服务器提供具有唯一ID的席位列表，例如：

[
    { id: 1, image: 'url_to_the_image', coordinates: { x: 1, y 1 }},
    { id: 2, image: 'url_to_the_image', coordinates: { x: 10, y 10 }},
    { 
        // more seats 
    }
]

然后你可以像这样使用HTML：

<div class="container"></div>

CSS：

.container {
    background: url(../yourVenueMapImageUrl);
}

然后，使用javascript，运行您的JSON并在divs中将您的座位添加为.container。添加ID作为数据属性和.seat类。您还可以使用style属性设置coordinates以将座位放置在相对于您的场地地图的特定位置。最后，添加一个事件处理程序，用于监听具有该.seat类的元素的点击，并获取ID属性。为了提高性能，您还可以让一个事件处理程序监听.container中任何元素的点击。

希望能帮助到你。