Question

我有一个简单的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>

导致以下图像： Showing Box on Layout Image

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

如何解决此问题，最好是使用CSS？任何其他解决方案也欢迎。提前谢谢。

Answer 1

我能够根据本网站上的一些答案以及@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>

希望这有助于某人。一些支持线程是here，here和here。

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

1 个答案: