gpt4 book ai didi

html - 在特定位置将图像放在另一个图像之上

转载 作者:行者123 更新时间:2023-11-28 13:12:32 25 4
gpt4 key购买 nike

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

这是我的意思的代码示例。这是一张 map ,上面有 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>

我希望这是一个动态页面,这样我就可以将它用于许多不同的收藏 map ,我只需将所有图像 map 区域坐标传递给它,它就会生成图像 map 。我可以在数据库交互和 AJAX 方面做任何事情我只是想不出如何在另一个图像之上显示一个图像而不必使用 div 并手动找出像素中的每个位置

最佳答案

做了一些工作,弄清楚如果我使用圆圈来标记图像映射的位置,那么我就可以使用该区域的 x 和 y 坐标和 div 位置。显然 session 变量不会在最后一件事中使用,我将使用从数据库中获取的变量,但这在功能上做了它应该做的事情。圆的工作原理是 (x, y, radius) 所以只需将位置的 x 和 y 坐标存储在数据库中,半径可以由 map 上图标的大小定义。当调用数据库时,将 x 和 y 插入到 div 的 css 或 map 区域的坐标中。

<?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 变量设置为 true,如果它是 false,如果它是 true,则设置为 false。

关于html - 在特定位置将图像放在另一个图像之上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15339226/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com