0

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

这是我的意思的代码示例。如果数据库的结果显示用户已收集它，则这是一张带有 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 并手动找出以像素为单位的每个位置

4

1 回答 1

0

做了一些工作并弄清楚我是否使用圆圈来标记图像映射的位置，然后我就能够使用该区域的 x 和 y 坐标和 div 位置。显然，会话变量不会在最后一件事中使用，我将使用从数据库中获取的变量，但这在功能上应该做的。圆的工作原理是 (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 文件只是简单地将会话变量设置为 true 如果它是 false 和 false 如果它是 true 。

于 2013-03-11T15:53:13.090 回答