jQueryを使った写真の差し替えのプログラムです。
下のように写真1から写真6をクリックすると、その写真が中央の写真に表示されます。 

写真1 写真 写真4
写真2 写真5
写真3 写真6
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 13.0.6.0 for Windows">
<META http-equiv="Content-Style-Type" content="text/css">
<TITLE></TITLE>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<style type="text/css">
#tbl .small{width:200px;}
#tbl #big{width:500px;}
</style>
<script type="text/javascript">
<!--
$(function(){ // HTMLが読みこまれてから実行するおまじない!
  $("#tbl img.small").click(function(){
     $imgfile = $(this).attr("src");//Clickした画像のURL
      $("img#big").fadeOut("slow",function() {
        $("img#big").attr("src",$imgfile);
        $("img#big").fadeIn("slow");
      });
  });
});
// -->
</script>
</HEAD>
<BODY>
<TABLE border="0" id="tbl">
  <TBODY>
    <TR>
      <TD><IMG src="a01.jpg" class="small"></TD>
      <TD rowspan="3"><IMG src="a01.jpg" id="big"></TD>
      <TD><IMG src="a04.jpg" class="small"></TD>
    </TR>
    <TR>
      <TD><IMG src="a02.jpg" class="small"></TD>
      <TD><IMG src="a05.jpg" class="small"></TD>
    </TR>
    <TR>
      <TD><IMG src="a03.jpg" class="small"></TD>
      <TD><IMG src="a06.jpg" class="small"></TD>
    </TR>
  </TBODY>
</TABLE>
</BODY>
</HTML>