(1) Make an array of Objects that describe images (aside -- there is a built-in Javascript
Image object that you can use if you want to)
var images[3];
images[0] = {url: "pic1.jpg", height: "100", width: 200" };
images[1] = { ... };
images[2] = {.... };
/********************************************************************/
(2) Create a function that will get the current innerHTML from the div (id="screen" and append
the HTML ![]()
tag with the information of a randomly chosen image from the
images[] array. !!DON'T WORRY ABOUT POSITIONING YET!!
function go() {
var item = getElementById("screen);
s = item.innerHTML; // old stuff
// pic a random index in the images array
...
// use it to get info about the image, build newElement
var newElement = "![]()
";
// append newElement to variable s
s += newElement;
// write out the new innerHTML
item.innerHTML = s;
...
} // end of function go()
/********************************************************************/
(3) Each image must have a unique id so that you can position it individually.
Also, put images into the same class so that you can initialize the style properties
in the head section (per InLab1015.txt).
So, in item 2 (above), the actual HTML img string you are building (to append to the
current innerHTML) looks like this:
"
"
Initialize count at count = 0, then increment count every time go() is called.
Add the