Question

我想做的是将交互式收藏地图作为游戏收藏指南的一部分。主图像（在这种情况下为网格）将是游戏中的区域的地图。在地图上将有收藏品位置的图标。点击收藏品的图标后，它会在图标上创建一个红色的x，以便该人知道他们已经收集了它。此红色x将是主地图顶部的图像，并且需要位于该收藏品的图像地图的精确坐标处。

这是我的意思的代码示例。如果db的结果显示用户已收集它然后将其标记为红色，则这是一张包含1个单一收藏品的地图。

<img src = "grid.png" usemap="#checklist"/>
<map name="checklist">
<?php
if(collectible1 != "collected")//if it isnt collected dont alter the map
{
  echo '<area shape="rect" coords="0,0,82,126" href="# //some AJAX call to update DB">';
}
else
{
    //display a redX image at exact same coordinates as area above
}
?>
</map>

我希望这是一个动态页面，所以我可以将它用于许多不同的收藏地图我只是将它传递给所有图像地图区域坐标，它将生成图像地图。我可以在数据库交互和AJAX方面做所有事情我只是想弄清楚如何在另一个图像的顶部进行图像显示，而不必使用div并手动计算每个像素的位置

Answer 1

做了一些工作并想出如果我使用圆圈来标记图像地图的位置，那么我就可以使用该区域的x和y坐标以及div位置。显然会话变量不会在最后的事情中使用我会使用从DB中获取的变量，但这会在功能上做到这一点。圆圈的工作原理是（x，y，radius）因此，只需将位置的x和y坐标存储在数据库中，半径就可以通过地图上图标的大小来定义。当调用db时，将x和y插入到div的css或地图区域的坐标中。

<?php 
session_start();
?>
<html>
<head>
<title></title>

<style>
#collectible1
{
left: 355;
top: 357;
position: absolute;
}

</style>

</head>
<body>
<div id = "collectiblemap">
    <img src = "grid.png" usemap="#checklist"/>
    <map name="checklist">
    <?php
    if(!isset($_SESSION['found']))
    {
        $_SESSION['found'] = false;
    }
    if($_SESSION['found'] == true)
    {
        echo '<div id = "collectible1"><a href = "found.php"><img src = "greenimg.jpg"/></a></div>';
    }
    else
    {
        echo '<area shape="circle" coords="355,357,19" href="found.php" alt="">';
    }
    ?>
    </map>

</div>
</body>
</html>

found.php文件只是将session var设置为true（如果为false），如果为true，则设置为false。

将图像放在另一个特定位置的顶部

1 个答案: