Stacking 2 divs on an html img

What I'd like to do is something like:

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

With these constraints:

The html img needs to be able to have its src (and size) changed from Javascript.

The top z-level div should be able to have its size changed from Javascript, also it follows the mouse (by javascript). I'd like to use relative positioning, so the coords match the img dimensions. Maybe absolute would use the parent dimensions? (same as img)

The outer d开发者_StackOverflow社区iv is just there so I can read mouse click positions from it. It should be able to have its sized changed to follow changes in the img src.

I have a use involving high and low res images of the same material. I'd like to show the low res image with a movable zoom box (transparent div with border), then when the user clicks it resizes the img object and outer div and loads the high res image, then scrolls the window to center the corresponding (scaled) spot on the high res image. There's no actual zoom, it just works that way by scrolling the high res.

I've got everything working except the zoom box: it loads the high res and scrolls ok on a click. To be able to set the z-index on the movable box higher than the img but still have the movable box layer use the same coordinates as the fixed div and the img is the problem. The box needs to float over the img. I'm not using the image as a background partly because I need to stretch it in y.

The site owner thought it might help to prevent theft of his images if he squashed them to a distorted aspect ratio. I calculate a height and force the img to use that, which makes them look better. Different images have different aspect ratios, which is why I want Javascript control over the size of the zoom box.

Using the :before and :after pseudo selectors new in CSS3, you can easily have 2 extra layers on the same object.

This is good for applying layers on the same object, as it means that you won't have to be messing about with having to float and adjust the margin of the original element and other such hassles.

http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/

I guess you would like to take a look at several ways to protect Images, as per your last demands. here