jQuery: populate images in random points over another image on page?
<p>So I have a shopping cart that has a fixed position on my page. Imagine <a href="http://www.google.com/imgres?q=shopping%20cart%20top%20view&amp;num=10&amp;um=1&amp;hl=en&amp;rlz=1C1CHFA_enUS484US484&amp;biw=1203&amp;bih=636&amp;tbm=isch&amp;tbnid=X1kEZI497zk7OM%3a&amp;imgrefurl=http://www.shutterstock.com/pic-1833588/stock-photo--d-golden-shopping-cart-isolated-top-view.html&amp;docid=jOfI5CNWkh30SM&amp;imgurl=http://image.shutterstock.com/display_pic_with_logo/62870/62870,1158115330,1/stock-photo--d-golden-shopping-cart-isolated-top-view-1833588.jpg&amp;w=450&amp;h=470&amp;ei=lmvTT-C2OuTs6gH7n72LAw&amp;zoom=1&amp;iact=hc&amp;vpx=313&amp;vpy=114&amp;dur=43&amp;hovh=229&amp;hovw=220&amp;tx=100&amp;ty=135&amp;sig=100380215418192422415&amp;sqi=2&amp;page=1&amp;tbnh=133&amp;tbnw=128&amp;start=0&amp;ndsp=19&amp;ved=1t:429,r:1,s:0,i:75" rel="nofollow">something close to this</a> except it's not at an angle, and it's facing perfectly vertically. What I want to do (with jQuery) is populate images over this image, randomly, with the only restriction being that they're inside the shopping cart "basket" area.</p>

<p>I'm guessing there's some way to refer to the area inside the shopping cart basket, and then just do some sort of jQuery <code>append</code> at those points.</p>

<p>I guess I'd start by using position()....</p>

<pre><code>var pos = $("#myimage").position();
top = pos.top;  // top offset position
left = pos.left; // left offset position
right = pos.left + $("#myimage").width;
bottom = pos.top + $("#myimage").height;
</code></pre>

<p>And then get the x- and y- positions by doing something like the following:</p>

<pre><code>var adjustedHigh = (top - bottom) + 1;

var y = Math.floor(Math.random()*adjustedHigh) + bottom
</code></pre>

<p>Not sure how to append to that coordinate though.</p>
