PART I

Open the code to your webpage and paste the following Javascript into your page below the TITLE line in your code (you will recognize it because it starts with <title> and ends with </title>).

Once you have pasted this code in the page ... you will have to open the code and edit the lines starting with theImages[0] to point to your images.  You can see I have all my images in a folder called "photos" and name my images using numbers (for ease of tracking.)

<script language="JavaScript"> <!-- var theImages = new Array() // ================Edit Below====================== theImages[0] = '/photos/123.jpg' theImages[1] = '/photos/126.jpg' theImages[2] = '/photos/129.jpg' theImages[3] = '/photos/132.jpg' theImages[4] = '/photos/133.jpg' var theText = new Array() theText[0] = 'WT Hanes Elementary School first graders are busy at work.' theText[1] = 'The Irving ISD All City Band concert was held at Nimitz High School. ' theText[2] = 'Townley Elementary School fifth graders in Mrs. Fischer’s class use laptops.' theText[3] = 'First grade students in Mrs. Nicholas’ class at Gilbert Elementary School use laptops.' theText[4] = 'First grade students at Gilbert Elementary School research Texas symbols.' // ================Edit Above====================== var j = 0 var p = theImages.length; var preBuffer = new Array() for (i = 0; i < p; i++){ preBuffer[i] = new Image() preBuffer[i].src = theImages[i] } var whichImage = Math.round(Math.random()*(p-1)); function showImage(){document.write('<img border="0" src="'+theImages[whichImage]+'">'); } function showText(){document.write(theText[whichImage]); } // function FP_changeProp() {//v1.0 var args=arguments,d=document,i,j,id=args[0],o=FP_getObjectByID(id),s,ao,v,x; d.$cpe=new Array(); if(o) for(i=2; i<args.length; i+=2) { v=args[i+1]; s="o"; ao=args[i].split("."); for(j=0; j<ao.length; j++) { s+="."+ao[j]; if(null==eval(s)) { s=null; break; } } x=new Object; x.o=o; x.n=new Array(); x.v=new Array(); x.n[x.n.length]=s; eval("x.v[x.v.length]="+s); d.$cpe[d.$cpe.length]=x; if(s) eval(s+"=v"); } } function FP_getObjectByID(id,o) {//v1.0 var c,el,els,f,m,n; if(!o)o=document; if(o.getElementById) el=o.getElementById(id); else if(o.layers) c=o.layers; else if(o.all) el=o.all[id]; if(el) return el; if(o.id==id || o.name==id) return o; if(o.childNodes) c=o.childNodes; if(c) for(n=0; n<c.length; n++) { el=FP_getObjectByID(id,c[n]); if(el) return el; } f=o.forms; if(f) for(n=0; n<f.length; n++) { els=f[n].elements; for(m=0; m<els.length; m++){ el=FP_getObjectByID(id,els[n]); if(el) return el; } } return null; } --> </script>

Don't edit any of the code except the section between the lines.  You can easily change the number of images ... by simply adding more theImages[x] and theText[x] and continue number sequentially from "0" or reduce the number of images by deleting some (be sure to leave them consecutively numbered!)

Now all you have to do is to create your images, name them the same as you listed in your code and place them in a folder called "photos".  (Or write the code to point to any folder you want to use for the images.)

PART II - Showing the IMAGE

Now to get an image to show you will have to place the following on your page while in the normal editing view.

            Click on the page where you want the image to go.

            Go to INSERT … drag down to WEB COMPONENT

            In the dialog box … drag down to the bottom to ADVANCED CONTROLS

            Click on ADVANCED CONTROLS and on the right click on HTML

            Click the FINISH button

            You will now have an empty “HTML Markup” box.

Paste the following into the box.

<script language="JavaScript"> <!-- showImage(); //--> </script>

Click OK.

You will now see a yellow square with “<?>” written in it.

This yellow square will appear as a RANDOM PICTURE when you view the page on the web.

PART II - Showing the TEXT

Now to get the text to show you will have to place the following on your page while in the normal editing view.

            Go to the line below the image (yellow square with "<?>".)

            Go to INSERT … drag down to WEB COMPONENT

            In the dialog box … drag down to the bottom to ADVANCED CONTROLS

            Click on ADVANCED CONTROLS and on the right click on HTML

            Click the FINISH button

            You will now have an empty “HTML Markup” box.

Paste the following into the box.

<script language="JavaScript"> <!-- showText(); //--> </script>

Click OK.

You will now see a SECOND yellow square with “<?>” written in it.

This yellow square will appear as the matching text for the image when you view the page on the web.