<html>
<head><title>Class switching</title>
<script language="javascript" type="text/javascript">

 function loadDataAndDisplay(){
   var xmlhttp = false;
   try {
    xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
   } catch (e) {
	  // okay, if not that, try this...
      try {
         xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (E) {
	  	// okay must be mozilla
         if ( (typeof XMLHttpRequest) != 'undefined' ){
             xmlhttp = new XMLHttpRequest();
         }
      }
   }
   if(xmlhttp){
     xmlhttp.open("GET", "data.txt", true);
     xmlhttp.onreadystatechange = function(){
       if (xmlhttp.readyState==4) {
           prepareData(xmlhttp.responseText);
       }
     };
     xmlhttp.send(null);
   }
 }

 function prepareData(text){
   var lines = text.split("\n");
   var buf = "";
   for(var i=0;i<lines.length-1;i++){
        var parts = lines[i].split(";");
        buf += createDiv(parts[0],parts[1],parts[2],parts[3],parts[4]);
   }
   var mainArea = document.getElementById("mainArea");
   mainArea.innerHTML = buf;
 }
 function doSomething(){
	alert("Your click was not on an image");
 }

 function createDiv(author,locale,date,theme,title){
	  var b = "<div class='out' onmouseover=\"className='over'\" "+
	   "onmouseout=\"className='out'\"  "+
       "onclick=\"javascript:doSomething();return true;\">"+
	"<a href=\"javascript:void(0)\" onmouseover=\"self.status='';return true\" "+
	   "onclick=\"javascript:open('/icons/pdf.gif','pop','location=0,width=50,height=40');"+
       "event.cancelBubble=true;\">"+
       "<img src=\"/icons/image1.gif\" hspace=\"10\" vspace=\"5\" width=\"20\" height=\"22\"></a>"+
	"<a href=\"javascript:void(0)\" onmouseover=\"self.status='';return true\" "+
       "onclick=\"javascript:open('/icons/sun.gif','pop','location=0,width=50,height=35');"+
       "event.cancelBubble=true;\">"+
       "<img src=\"/icons/bullet.gif\" hspace=\"10\" vspace=\"5\" width=\"10\" height=\"10\"></a>"+
    "<a href=\"javascript:void(0)\" onmouseover=\"self.status='';return true\" "+
       "onclick=\"javascript:open('/icons/text.gif','pop','location=0,width=50,height=65');"+
       "event.cancelBubble=true;\">"+
       "<img src=\"/icons/new.gif\" width=\"28\" height=\"11\" hspace=\"10\" vspace=\"5\"></a>"+
    "<table cellpadding=\"0\" style=\"padding:3px\" cellspacing=\"0\" border=\"0\">"+
       "<tr><td valign=\"top\">Author:</td><td>"+author+"</td></tr>"+
	   "<tr><td valign=\"top\">Date:</td><td>"+date+"</td></tr>"+
	   "<tr><td valign=\"top\">Theme:&nbsp;</td><td>"+theme+"</td></tr>"+
	   "<tr><td valign=\"top\">Locale:&nbsp;</td><td>"+locale+"</td></tr>"+
	   "<tr><td valign=\"top\">Title:</td><td>"+title+"</td></tr>"+
	   "</table></div>";
	  return b;
 }//for
 
</script>

<style type="text/css">
.over{
  background: #eee;
  position:relative;
  height:160px;
  width:160px;
  float:left;
  margin-left:20px;
  margin-right:20px;
  margin-top:20px;
  margin-bottom:20px;
  padding:2px;
  border:outset 1px;
  cursor:pointer;
  font-size:7pt;
  font-family:arial,helvetica,sans-serif;
}
.out{
  background: #fff;
  position:relative;
  height:160px;
  width:160px;
  float:left;
  margin-left:20px;
  margin-right:20px;
  margin-top:20px;
  margin-bottom:20px;
  padding:2px;
  border:inset 1px;
  cursor:default;
  font-size:7pt;
  font-family:arial,helvetica,sans-serif;
}
</style>
</head>
<body onload="loadDataAndDisplay()">
<fieldset><legend>Some Entries from our data.txt</legend>
<div id="mainArea" name="mainArea">
</div>
</fieldset>
</body>
</html>