How to draw and tile images with JavaScript


Step-1:
This tiny program was in the download section and it was my first JavaScript program that was published in the JavaScriptSource. I improved this code, but I think it should be in this section. Because it is not a fully functional program, and I am not going to update it anymore.


Before start, I should mention that this code only works with Internet Explorer 5 (and up), Opera 6 (and up) and Konqueror. It will not work in Mozilla, Netscape or Firefox. Version 8 of Netscape might work (with the MSIE rendering engine), but not tested. Okay let's start. Open your favorite text editor and type the code below:

<form name="img_cln">

<script language="javascript" type="text/javascript">
<!--

/*
 * Author: Ahsanul Haque Shovon
 * Email: ahsanul.haque.shovon@gmail.com / ahsanul_haque_shovon@yahoo.com
 * Web: http://shovon.110mb.com
 */

var idx = 0;

/****************************************
 * This function draws a random image on
 * the browser.
 ****************************************/
function draw_Image()
{
  idx = Math.floor(Math.random() * 4) + 1;
  document.write('<img src="./img' + idx + 
                 '.jpg" width="70" height="60" alt="">');
}


draw_Image();


/***********************************************
 * This function prompts the user for several 
 * inputs. It then parse them and write on the
 * browser.
 ***********************************************/
function user_Input()
{
  inp = parseInt(prompt("Enter the number of tiles to generate", ""));
  wdt = parseInt(prompt("Enter your desired width of the image", ""));
  hgt = parseInt(prompt("Enter your desired height of the image", ""));

  for(i = 0; i < inp; i++)
  {
    document.write('<img src="./img' + idx + '.jpg" width="' + wdt +
                   '" height="' + hgt + '">');
  }
}

//-->
</script>

<br>

<input type="button" value=" Tile Image " onclick="user_Input();">

</form>

Step-2:
Now save the file as 'any_name_you_like.html' and open it with your web browser (MSIE/Opera).