Overlay Image over Image
<p>I am searching for a way to overlay an image on an existing image.</p>

<p>e.g:</p>

<p><img src="http://i.stack.imgur.com/N0REB.gif" alt="img1"> + <img src="http://i.stack.imgur.com/OM7bj.jpg" alt="img2"></p>

<p>I have found a great example over here: <a href="http://www.tjkdesign.com/articles/png_overlay_with_no_extra_markup.asp" rel="nofollow">PNG overlay using one single Image element.</a>
but I have <strong>two</strong> problems with these. </p>

<p><strong>First</strong> of all, I don't want the dimensions to be equal to each other. e.g (215*215 on 215*215). This is because my users would have the ability to choose where they want to put their image. (Top, left, bottom, top-right) so 8 directions.</p>

<p>The <strong>second</strong> problem is that in that example, only 2 images are allowed to overlay. My users (again) will have the ability to put multiple images on top of it.</p>

<p>I have a little knowledge of Javascript and PHP, so it would be great if you guys (and girls) could help me out.</p>

<p>Sincerely,</p>
