I am trying to dynamically place an image of same size and position over an another div, but I am unable to make it work.
Here is my current attempt.
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" >
$(document).ready(function() {
var div = document.getElementById("im");
var canvas = document.getElementById("img");
canvas.height = div.offsetHeight ;
canvas.width = div.offsetWidth ;
canvas.offsetTop = div.offsetTop;
canvas.offsetLeft = div.offsetLeft;
});
</script>
</head>
<body>
<div>
<div id="im">
<p> </p><p> </p><p> </p><p> </p>
<p> </p><p> </p><p> </p><p> </p>
<p> </p><p> </p><p> </p><p> </p>
<p> </p>
</div><img id="img" src="axz.png" style="position: absolute; z-index:100; border:dotted thick; " />
<div class="t">
</div>
</div>
Look this example I made for you.
Is this what you want?
Updated:
Live demo: http://jsfiddle.net/oscarj24/Byzn8/1/