What im trying to do is make a interactive collectible map as a part of a collectible guide for a game. The main image (grid in this case) will be the map of an area in a game. On the map there will be icons for the locations of the collectibles. Upon clicking the icon for the collectible it will create a red x over the icon so the person will know they have collected it. This red x will be an image on top of the main map and will need to be at the exact coordinates of the image map for that collectible.
this is a code example of what i mean. this is a map with 1 single collectible on it if the result from the db says the user has collected it then mark it red.
<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>
i want this to be a dynamic page so i can use it for many different collectible maps i just pass it all the image map area coordinates and it will generate the image map. I can do everything in terms of the DB interaction and AJAX i just cant figure out how to make an image display on top of another image without having to use a div and manually figure out every single location in pixels
Did a bit of work and figured out if i used a circle to mark the position of the image map i was then able to use the x and y coordinates of that area with a div position. Obviously session variables wont be used in the final thing i will use variables taken from the DB but this does what it should functionally. the circle works by having (x, y, radius) So simply store the x and y coordinates of the location in the DB and the radius can be defined by the size of the icons on the map. When the call to the db is made insert the x and y into either the css for the div or into the coordinates for the map area.
<?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>
The found.php file simply sets the session var to true if it is false and false if its true.