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>

これを動的なページにしたいので、さまざまな収集可能なマップに使用できます。すべての画像マップ領域の座標を渡すだけで、画像マップが生成されます。私はDBインタラクションとAJAXに関してすべてを行うことができます.divを使用せずに別の画像の上に画像を表示する方法を理解できず、すべての場所をピクセル単位で手動で把握することができません

4

1 に答える 1

0

少し作業をして、画像マップの位置をマークするために円を使用したかどうかを調べたところ、その領域の 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 ファイルは、セッション変数が false の場合は true に設定し、true の場合は false に設定します。

于 2013-03-11T15:53:13.090 に答える