一个HTML IMG堆叠2周的div

我希望做的是一样的东西：一个HTML IMG堆叠2周的div

<div> (parent, sized to img) 
    <div> (movable within parent, z-level 1+) 
     <img /> (z-level 0) 
    </div> 
</div>

这些限制：

的HTML IMG需要能够有它的SRC（和大小）从Javascript更改。

顶级z级div应该能够改变它的大小从Javascript，也遵循鼠标（通过JavaScript）。我想使用相对定位，因此坐标匹配img尺寸。也许绝对会使用父维度？（与img相同）

外部div就在那里，所以我可以从中读取鼠标点击位置。它应该能够改变其大小，以遵循img src中的更改。

我有一个用途涉及相同材料的高分辨率和低分辨率图像。我想用一个可移动的缩放框（具有边框的透明div）显示低分辨率图像，然后当用户单击它时，会调整img对象和外部div的大小并加载高分辨率图像，然后滚动窗口以对应中心（缩放）的高分辨率图像上。没有实际的缩放，只是通过滚动高分辨率来实现。

我已经有一切工作，除了变焦框：它加载高分辨率和滚动确定点击。为了能够将可移动框上的z-index设置为高于img，但仍然有可移动框图层使用与固定div相同的坐标，并且img是问题。该盒子需要漂浮在img上。我不使用图像作为背景，部分原因是我需要在y中展开它。

该网站的所有者认为这可能有助于防止盗窃他的图片，如果他压扁他们扭曲的长宽比。我计算一个高度并强制img使用它，这使它们看起来更好。不同的图像有不同的长宽比，这就是为什么我想让JavaScript控制缩放框的大小。

2011-08-21 ab1jx

把一个[JS小提琴]（http://jsfiddle.net/）或类似的* live *，演示给我们玩。并发布你已经尝试过的东西以及你有多远。 –

尝试用一些数字的帮助来说明，或者大卫正确地说我们可以玩一个js小提琴 –

使用:before和:after CSS3中新增的伪选择器，您可以在同一个对象上轻松地创建2个额外的图层。

这对于在同一个对象上应用图层很有用，因为这意味着您不必为了浮动和调整原始元素的边距以及其他此类麻烦而烦恼。

2011-08-21 17:41:27 desbest

我想我现在可能会跳过缩放框，太多的浏览器兼容性问题。 – ab1jx

我不关心保护图像，只关心如何拉伸它们。他将图像链接到其他人做的一堆Flash中。我只是做了一个程序生成的HTML版本，我警告他会让图像更容易被窃取，但无论如何，它都可以在http://www.radioshackcatalogs.com/html – ab1jx

我猜你想看看几种方法来保护图像，按您的需求最后。 here

2011-08-21 17:47:03

回答