Question

我将通过断言我不是“网络家伙”来解释这个问题。除了XML和一些相关的XSLT之外，我几乎没有使用JavaScript编程或任何其他基于Web的编程技术的经验;对我好吗！

我想我想要创建的东西类似于imagemap：我想在网页上放置一个图像，然后根据我从硬件机箱收到的信息，填充各种“硬件插槽” “在机箱的图像中，有一个位于该位置的硬件图像。

我想创建这些点并将它们与图像相对应，而不是浏览器窗口，以便我可以在任何地方创建机箱的图像，并仍然将卡的图像放在适当的插槽上。

是否有机制使用vars来保留偏移量，然后使用相对于机箱图像的var偏移来放置其他图像？有没有不同的方法来做这种事情？

Answer 1

您可以使用CSS绝对/相对定位将它们放在正确的位置。

另一种解决方案是使用<canvas>来实际绘制由多个其他图像组成的图像。

Answer 2

我同意ThiefMaster，并且标记的草图将是这样的。

<div class="chassi">
    <div id="slot1" class="slot"></div>
    <div id="slot2" class="slot"></div>
    // more slots if needed 
</div>

<style>
    .chassi
    {
         position: relative;
         background: url(/path/to/your/image.png);
    }
    .slot
    {
         position:absolute;
    }
    #slot1
    {
         left: 20px;
         top: 20px;
    }
    #slot2
    {
         left: 20px;
         top: 60px;
    }

</style>

然后使用javascript加载插槽数据，并将图像添加到“插槽”-divs。

Answer 3

它名为image mapping，您可以阅读here

是否可以在另一张图像中为图像创建“锚点”？

3 个答案: