Create an image tag dynamically with jQuery!

Create an image tag dynamically with jQuery!

by SHELDON PASCIAK

HTML

<div id="container">
</div>
<p style="position:absolute;bottom:0;">
Where's JIM ACOSTA (TODO)-- just in case he ends up in a khashoggi incident.
</p>

CSS

body{
background:white;
  

}
img {
    /* border:1px outset rgb(0,100,255); */
    margin:3px;

}

* {
  cursor:pointer;
  background:transparent;
}

JavaScript

var img_index = 1;
   var maxw=320;
   var maxh=240;   
   var howmany = 22 ;
   var sss=null;   
   var jimindex=0;
   var ww=25;
   var hh=25;

function addone(filename) {

if (!filename) filename='http://lostwords.org/images/jim.png';
if (Math.random()*1000>500) filename='http://lostwords.org/images/me.png';

ww+=1; if (Math.random()*1000>500) ww+=2;
hh+=1;if (Math.random()*1000>500) hh+=2;

if (ww>100) {
ww=25;
hh=25;
}

    var s='<img style="position:absolute;left:llll;top:tttt;transform: rotate(180deg);"/>';
    
    if (Math.random()*100>50) s='<img style="position:absolute;left:llll;top:tttt;transform: rotate(90deg);"/>';
    
    if (Math.random()*100>50) s='<img style="position:absolute;left:llll;top:tttt;transform: rotate(270deg);"/>';
           
    var ll=Math.floor(Math.random()*maxw);ll+="px";
    var tt=Math.floor(Math.random()*maxh);tt+="px";
    
    s=s.replace("llll",ll);//left
    s=s.replace("tttt",tt);//top
    
        var img = $(s).attr({
            'id': 'myImage'+img_index,
            'src': filename,
            'alt': '',
            'title': '',
            'width': ww,
            'height': hh
        }).appendTo('#container'); 
        img_index++;
}

function addjim() {

sss=null;

jimindex=img_index;

    var s='<img style="border:0px solid red;position:absolute;left:llll;top:tttt;"/>';
    var ll=Math.floor(Math.random()*240);ll+="px";
    var tt=Math.floor(Math.random()*320);tt+="px";
    
    s=s.replace("llll",ll);
    s=s.replace("tttt",tt);
    
        var img = $(s).attr({
            'id': 'myImage'+img_index,
            'src': 'http://lostwords.org/images/jjim.png',
            'alt': '',
            'title': '',
            'width': ww,
            'height': hh
        }).appendTo('#container');
        
           $('#'+'myImage'+img_index).on("click", function(){ addthem(); });

        
          ...