Integrating the Images

We will now proceed with the dynamic creation of our image banner by storing some HTML code in different JavaScript variables. This code will then be written on our page with a document.write function:

var visio_gd=new Array()

visio_gd[0]='<a href="http://"><img src="my_image1.gif" border=1></a>'
visio_gd[1]='<a href="http://"><img src="my_image2.gif" border=1></a>'
visio_gd[2]='<a href="http://"><img src="my_image3.gif" border=1></a>'
visio_gd[3]='<a href="http://"><img src="my_image4.gif" border=1></a>'
visio_gd[4]='<a href="http://"><img src="my_image5.gif" border=1></a>'

var visio_final=''
for (i=0;i<visio_gd.length;i++)
  visio_final = visio_final + visio_gd[i] + "  "

Here we use an array (visio_gd[]) in which we store the HTML code which corresponds to the various images of our gallery and the associated links. Once this array is filled in, we use a string variable, (visio_final), to store all the table cells. Later on, we will associate this variable with the document.write function to generate the display in the browser.


We then concatenate all the cell contents using a loop based on the length property. Every array object has this property indicating its number of elements. So we can easily see how many elements need to be included in the final variable. Once the HTML code has been created, we have to incorporate it into our Web page. How we do this depends on the visitor's browser.