Animals

==== Overview: 4 files ==== Four files will be created to accomplish today's assignment * animals.xsl - this is the transformation file which define the correlation between HTML tags and the XML tags we are using. * animals.css - CSS file to give style and layout to the XML contents after transformation * animals.htm - The XML file can be directly opened in the browser and well formated according to the XSL and CSS, but it is more comfortable and flexible to see HTML files :) * animals.js - javascript file. which we use in animals.htm to read XML contents and the XSL attached to it. And do the transformation. Note: the javascript code must be put into separated file in order to pass the strict validation. === XSLT definition === // animals.xsl // \\ Validated against [[http://www.w3schools.com/XML/xml_validator.asp|W3Schools XML validater]]



 








  Lots of animals
 
  
    
    
 
    
      ID
      Name
      Weight
      Head info
      Body info
      Leg
    
    
      Eye
      Mouth
      Nose
      Ear
      Fur

=== CSS: to make the page look better === // animals.css // \\ Validated against [[http://jigsaw.w3.org/css-validator/|W3.org CSS validater]]


body {
  font-family:"sans serif";
}
 
h2 {
  font-size:140%;
  color:green;
}
 
table {
  border-width:3px;
  border-style:solid;
  border-color:blue;
}
 
th {
  text-align:center;
  font-size:120%;
  font-family:"Arial";
  color:yellow;
  background-color:#010101;
}
 
tr {
 
}
 
tr:hover {
  background-color:#999999;
}
 
td {
  text-align:left;
  color:green;
  font-size:100%;
  font-family:"Arial";
  border-width:1px;
  border-style:solid;
  border-color:blue;  
}
 
td:hover {
  background-color:#ee22ff;
  color:white;
}

=== HTM === // animals.htm // \\ validated against [[http://validator.w3.org/|W3.org htm strict validater]]



 



Animals

=== JS: javascript file === // animals.js // \\

 
function loadXMLDoc(fname)
{
  var xmlDoc;
  // code for IE
  if (window.ActiveXObject)
  {
    xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
  }
  // code for Mozilla, Firefox, Opera, etc.
  else if (document.implementation && document.implementation.createDocument)
  {
    xmlDoc=document.implementation.createDocument("","",null);
   }
  else
  {
    alert('Your browser cannot handle this script');
  }
xmlDoc.async=false;
xmlDoc.load(fname);
return(xmlDoc);
}
 
function displayResult()
{
xml=loadXMLDoc("animals.xml");
xsl=loadXMLDoc("animals.xsl");
// code for IE
if (window.ActiveXObject)
  {
    ex=xml.transformNode(xsl);
    document.getElementById("example").innerHTML=ex;
  }
  // code for Mozilla, Firefox, Opera, etc.
  else if (document.implementation
  && document.implementation.createDocument)
  {
    xsltProcessor=new XSLTProcessor();
    xsltProcessor.importStylesheet(xsl);
    resultDocument = xsltProcessor.transformToFragment(xml,document);
    document.getElementById("example").appendChild(resultDocument);
  }
}

=== revised animals.xml === Revised a bit the XML file to include the XSL file we created today





.
.
.

=== Result === {{:study:screenshot.png|}} \\ As show in the screen shot above. When the htm file is opened in the browser the header will be displayed in black background and yellow text. When the mouse hover over the text of the contents the background of the row will change to grey and the cell background will turn pink.