<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<SCRIPT> 
var imageURL = "images/wedding-gallery.jpg";
var imageURL1 = "images/portrait-gallery.jpg";
var imageURL2 = "images/commercial-gallery.jpg";
var imageURL3 = "images/party-gallery.jpg";

function changeWedding(wedding) {
     if (document.images) {
          if (imageURL == "images/wedding-gallery.jpg") imageURL = wedding; 
          else 
		  	imageURL = "images/wedding-gallery.jpg";
			
         document.weddingImage.src = imageURL;
     }
}
function changePortrait(portrait) {
     if (document.images) {
          if (imageURL1 == "images/portrait-gallery.jpg") imageURL1 = portrait; 
          else 
		  	imageURL1 = "images/portrait-gallery.jpg";
			
         document.portraitImage.src = imageURL1;
     }
}
function changeCommercial(commercial) {
     if (document.images) {
          if (imageURL2 == "images/commercial-gallery.jpg") imageURL2 = commercial; 
          else 
		  	imageURL2 = "images/commercial-gallery.jpg";
			
         document.commercialImage.src = imageURL2;
     }
}
function changeParty(party) {
     if (document.images) {
          if (imageURL3 == "images/party-gallery.jpg") imageURL3 = party; 
          else 
		  	imageURL3 = "images/party-gallery.jpg";
			
         document.partyImage.src = imageURL3;
     }
}
</SCRIPT>

<H1>Gallery</H1>
<TABLE class="" cellSpacing=5 cellPadding=0 width=565 border=0>
<TBODY>
<TR>
<TD class="" width="50%">
<a name="wedding"></a><P>Wedding Gallery</P>
<P class=small>Click any image to enlarge"</P>
<P><img src="images/wedding-gallery.jpg" width="275" height="275" border="0" usemap="#Wedding" name="weddingImage" align="left"></P></TD>
<TD class="" width="50%">
<P>Portrait Gallery</P>
<P class=small>Click any image to enlarge"</P>
<P><img src="images/portrait-gallery.jpg" width="275" height="275" border="0" usemap="#Portrait" name="portraitImage"> </P></TD></TR>
<TR>
<TD class="" width="50%">
<a name="commercial"></a><P>Commercial Gallery</P>
<P class=small>Click any image to enlarge"</P>
<P><img src="images/commercial-gallery.jpg" width="275" height="275" border="0" usemap="#Commercial" name="commercialImage">  </P></TD>
<TD class="" width="50%">
<a name="party"></a><P>Celebration Gallery</P>
<P class=small>Click any image to enlarge"</P>
<P><img src="images/party-gallery.jpg" width="275" height="275" border="0" usemap="#Party" name="partyImage"> </P></TD></TR></TBODY></TABLE>
  <map name="Wedding">
    <area shape="rect" coords="0,0,138,104" href="#" onClick="changeWedding(\'images/wedding-1-fs.jpg\')">
    <area shape="rect" coords="137,0,276,105" href="#" onClick="changeWedding(\'images/wedding-2-fs.jpg\')">
    <area shape="rect" coords="0,103,138,283" href="#" onClick="changeWedding(\'images/wedding-3-fs.jpg\')">
    <area shape="rect" coords="137,104,279,276" href="#" onClick="changeWedding(\'images/wedding-4-fs.jpg\')">
  </map>
  <map name="Portrait">
    <area shape="rect" coords="0,0,138,104" href="#" onClick="changePortrait(\'images/portrait-1-fs.jpg\')">
    <area shape="rect" coords="137,0,276,105" href="#" onClick="changePortrait(\'images/portrait-2-fs.jpg\')">
    <area shape="rect" coords="0,103,138,283" href="#" onClick="changePortrait(\'images/portrait-3-fs.jpg\')">
    <area shape="rect" coords="137,104,279,276" href="#" onClick="changePortrait(\'images/portrait-4-fs.jpg\')">
  </map>
  <map name="Commercial">
    <area shape="rect" coords="0,0,138,104" href="#commercial" onClick="changeCommercial(\'images/commercial-1-fs.jpg\')">
    <area shape="rect" coords="137,0,276,105" href="#commercial" onClick="changeCommercial(\'images/commercial-2-fs.jpg\')">
    <area shape="rect" coords="0,103,138,283" href="#commercial" onClick="changeCommercial(\'images/commercial-3-fs.jpg\')">
    <area shape="rect" coords="137,104,279,276" href="#commercial" onClick="changeCommercial(\'images/commercial-4-fs.jpg\')">
  </map>
  <map name="Party">
    <area shape="rect" coords="0,0,138,104" href="#party" onClick="changeParty(\'images/party-1-fs.jpg\')">
    <area shape="rect" coords="137,0,276,105" href="#party" onClick="changeParty(\'images/party-2-fs.jpg\')">
    <area shape="rect" coords="0,103,138,283" href="#party" onClick="changeParty(\'images/party-3-fs.jpg\')">
    <area shape="rect" coords="137,104,279,276" href="#party" onClick="changeParty(\'images/party-4-fs.jpg\')">
  </map>
</body>
</html>
