Css 在HTML页面中的图像顶部显示一个框_Css_Html

Css 在HTML页面中的图像顶部显示一个框

css html

Css 在HTML页面中的图像顶部显示一个框,css,html,Css,Html,我有一个简单的HTML5页面，显示一个（相当大的）布局图像，其中包含一堆编号框。基于select元素，我想在图像上特定编号的框上显示一个红色的空心框这就是我到目前为止所做的： <div data-role="content" style="scrolling: scroll; position: relative;"> <div style="float:left; position: absolute; border: 2px solid red;

我有一个简单的HTML5页面，显示一个（相当大的）布局图像，其中包含一堆编号框。基于select元素，我想在图像上特定编号的框上显示一个红色的空心框

这就是我到目前为止所做的：

    <div data-role="content" style="scrolling: scroll; position: relative;">
         <div style="float:left; position: absolute; border: 2px solid red; left: 154px; top: 52px; width: 20px; height: 20px;"></div>
         <img alt="Floor Plan" src="../common/images/floorplan.jpg" width="100%" />
    </div>

产生以下图像：

我想我可以在javascript数组中预填充每个编号框的坐标以及每个框的宽度和高度，然后基于选择列表，我可以动态更改框div的相应CSS元素。然而，让我感到困惑的是，当浏览器调整大小时，图像会自动缩小（我使用的是Firefox，但我想这在大多数浏览器中都很常见），但是这个框无法与之匹配

我如何解决这个问题，最好使用CSS？欢迎使用任何其他解决方案。提前感谢。

我能够根据本网站上的一些答案和@WesleyMurch提供的提示推出一个解决方案。基本上，我必须分别计算高度和宽度比例（我原以为它们是一样的，但事实并非如此！），然后将比例因子应用于原始的左坐标和顶坐标，以获得缩放后的左坐标和顶坐标。最后，高度和宽度必须使用脱机计算以百分比指定

以下是解决方案的外观：

<html>
<head>
<title>Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
    function positionBox(event, x, y)
    {
        // Get the dimensions of the rendered image
        var renderedImg = event.currentTarget;
        var cw = $(renderedImg).width();
        var ch = $(renderedImg).height();

        // Get the dimensions of the original image
        var originalImage = document.getElementById("testImg");
        var nw = originalImage.naturalWidth;
        var nh = originalImage.naturalHeight;

        var newx = Math.floor((x * cw)/nw);
        var newy = Math.floor((y * ch)/nh);

        $("#redBox").css("left", newx + "px");
        $("#redBox").css("top", newy + "px");
        $("#redBox").css("visibility", "visible");

        alert("Current image dim = (" + cw + "," + ch + "), natural dim = (" + nw + ", " + nh + "), new top-left = (" + newx + ", " + newy + ")");
    }
</script>  
</head>
<body>
<div style="scrolling: scroll; position: relative;">
    <div id="redBox" style="float:left; position: absolute; border: 2px solid red; left: 0; top: 0; width: 6.3%; height: 4.6%; visibility: hidden;"></div>
    <img id="testImg" alt="Floor Plan" src="floorplan.jpg" width="100%" onload="positionBox(event, 918, 626);" />
</div>
</body>
</html>


试验
功能位置框（事件，x，y）
{
//获取渲染图像的尺寸
var renderimg=event.currentTarget；
var cw=$（renderimg）.width（）；
var ch=$（renderimg）.height（）；
//获取原始图像的尺寸
var originalImage=document.getElementById（“testImg”）；
var nw=原始图像。自然宽度；
var nh=原始出生体重；
var newx=数学楼层（（x*cw）/nw）；
var newy=数学楼层（（y*ch）/nh）；
$（“#redBox”）.css（“左”，newx+“px”）；
$（“#redBox”）.css（“top”，newy+“px”）；
$（“#redBox”）.css（“可见性”、“可见”）；
警报（“当前图像尺寸=（“+cw+”，“+ch+”），自然尺寸=（“+nw+”，“+nh+”），新的左上角=（“+newx+”，“+newy+”））；
}

希望这对某人有所帮助。一些支持线程是，和。

您可以按百分比计算坐标。@WesleyMurch感谢您的建议-这很有帮助。做得很好。我以前用一个复杂的锦标赛括号来做过这件事。回想起来，我本来可以做得不同，但在当时似乎更容易覆盖在图像背景上的结果。