// Declare the necessary variables and load the images
        var project = "";
        var imagenum = "";
        var mousestate = "";
        var imagetarget = "";
        var imagetargetover = "";
        var aryImages = new Array();
    
// Function to swap portfolio images around. A maximum of 4 images can be swapped. 
// Provide the name of the project currently visible and the no. of the image to be displayed.
    function changeimage(project, imagenum, mousestate) {
    //construct the path to the images which are to be displayed
        aryImages[1] = "images/portfolio/" + project + "1.gif";
        aryImages[2] = "images/portfolio/" + project + "2.gif";
        aryImages[3] = "images/portfolio/" + project + "3.gif";
        aryImages[4] = "images/portfolio/" + project + "4.gif"; 
        
        imagetarget = project + "swapimage";
        imagetargetover = project + imagenum + "over";
        
   //Change the main image to the selected     
        document.getElementById(imagetarget).src=aryImages[imagenum];
        var objToFade = document.getElementById(imagetargetover);
  
  //Check if its a mouseover or a mouseout action      
      if (mousestate=='over') {
      //Set the opacity of the overlay to solid
            if(typeof objToFade.style.opacity == "string") {
                objToFade.style.opacity = 1;
            } else {
                document.getElementById(imagetargetover).filters.alpha.opacity = 100;
            }     
      } else if (mousestate=='out') {
      //Set the opacity of the overlay to its original, of 70%
           if(typeof objToFade.style.opacity == "string") {
                objToFade.style.opacity = 0.7;
            } else {
                document.getElementById(imagetargetover).filters.alpha.opacity = 70;
            }   
      }
 }