Im not sure if this is possible.
I am making an upload page where users can upload a picture and manipulate it via drag / resize (jquery) to fit a pre defined template.
I have a DIV with a transparent .png background, which contains the img element.
I want to be able to drag and resize the img element, but want the image to appear BEHIND the transparent DIV.
I have tried using z-index, and rearranging the parent / child relationships etc, but whenever my draggable element is set behind the DIV, I cannot drag it or resize it (because its behind the div)
see here for an example of what I have so far: http://inspirasie.com/uploadtest.html
here is my code:
SCRIPT
<script>
$(function() {
$("#draggable").draggable({ containment: "#uploadarea"});
$( "#imagetester" ).resizable({ aspectRatio: true });
});
</script>
HTML
<div class="wrapper">
<div id="uploadarea">
<div id="imageplacearea">
<div id="draggable">
<img id="imagetester" src="images/testpic.jpg">
</div>
</div>
</div>
</div>
CSS
#draggable {
display: inline-block;
background-image: url(../../images/85percent.png);
background-repeat: repeat;
opacity:0.7;
filter:alpha(opacity=70);
}
#imageplacearea {
background-image: url(../../images/template.png);
height: 600px;
width: 500px;
background-repeat: no-repeat;
background-position: center center;
}
At the moment, the DIV containing the img, has opacity settings, so I can see whether it is within the border of the #imageplacearea div,
What I want is the image to be full opacity, but BEHIND the #imageplacearea div, and still remain draggable / resizable.
Can this be done? or can anyone suggest an alternative way to achieve what I need to achieve?
Thanks.