Question

How to add overlay to my codes.

<div class="demo">
    <div style="width: 300px; height: 91px; position: absolute; top: 148px; left: 12px;" class="resizable ui-draggable ui-resizable ui-draggable-disabled ui-state-disabled" id="resizable" aria-disabled="true">

    <div class="ui-resizable-handle ui-resizable-n"></div><div class="ui-resizable-handle ui-resizable-e"></div><div class="ui-resizable-handle ui-resizable-s"></div><div class="ui-resizable-handle ui-resizable-w"></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 1001;"></div></div>
    <div class="zoomslide ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" style="display: block;"><a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="left: 0%;"></a></div>
<div id="the_image" style="top: 12px; left: 12px; position: absolute;" class="ui-draggable"><div class="imgdiv" style="background: none repeat scroll 0% 0% red; height: 350px; width: 300px; overflow: visible;"><img width="334" height="350" src="images/lion-man.jpg" class="img1 image" id="first" style="position: relative; top: 0px; left: -17px;"></div></div></div>

What i need is when the crop button is click, and the full image is displayed, it should overlay on the part of the image outside the white-bordered-box.

I think it should create div’s and set opacity outside the white-bordered box, but I’ having trouble implementing it.

It should be something like:

function overlay(){
//codes here
}

Any help please.

http://deadwoodfilms.com/jquery/picture3/picture.html

Answer 1

The problem:

Unfortunately CSS backgrounds are additive in nature, you can cover something to add color but you can not negate color.

Solution one:

What you would need to do is actually have two versions of the image. One as a base, covered by the overlay. The second as the selection (on top of the overlay), with the edges cut off. Position it all correctly and the user will never know that they are seeing two images.

You will need an <img> (or a <div> with background) plus two <div> elements one of the same dimensions as the image, the other with the dimensions of the selection. The three should all use position: absolute; and be contained in an element with position: relative;.

The first <div> will act as the overlay, just give it a nice background color, and opacity if you want.

The second <div> is the magic. You will set the background of this <div> to your image.

Now using JS you can adjust the `background-position: Xpx Ypx;’ property such that the portion of the image that is shown matches with the position of the selection.

Suppose the image is 500x500px, and the selection is at (100,100). Setting `background-position: 100px 100px;’ should make it match up, though some adjustments may need to be made to account for any borders you may be using.

Obviously your JavaScript would also need to account for any modification of image size, as that would throw off the selection alignment.

Solution two:

You can use 4 <div> elements, all overlays, such that there is one <div> across the top of the image, another across the bottom, and one to each side of the selection. Those <div>‘s would then be dynamically re sized with JavaScript to to account for the size of the selection. This would have the effect of covering all area outside of your selection.