gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 01:44:16 25 4
gpt4 key购买 nike

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

这是我目前所拥有的:

    <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?也欢迎任何其他解决方案。提前致谢。

最佳答案

我能够根据本网站上的一些答案和@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 , herehere .

关于css - 在 HTML 页面中的图像顶部显示一个框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23766552/

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