ボタンをクリックして画像と文字を入れ替える
ソース 
<HTML>
<HEAD>
<SCRIPT Language="JavaScript">
<!--
var picNum=1;
var imgvalue=3;  //画像数
var imgPath=Array(imgvalue);  //画像のパス用の配列
var imgExplain=Array(imgvalue);  //画像説明用の配列

for (var i=0; i<imgvalue ; i++) {
  imgPath[i]=new Image();
}
/*画像を増やす場合は、変数「imgvalue」の値を変更して、「imgPath」に画像のパスを足していく*/
imgPath[0].src = "images/sample03.jpg";
imgPath[1].src = "images/sample04.jpg";
imgPath[2].src = "images/sample05.jpg";

/*画像の説明やタイトルを入力*/
imgExplain[0]="<FONT SIZE='-1'>■1.雪の豊平　その1</FONT>";
imgExplain[1]="<FONT SIZE='-1'>■2.雪の豊平　その2</FONT>";
imgExplain[2]="<FONT SIZE='-1'>■3.雪の豊平　その3</FONT>";

function changePic(picCount) {
  picNum+=parseFloat(picCount);
  if(picNum==0) {
    picNum+=1;
  } else if(picNum>imgvalue) {
    picNum-=1;
  } else {
    document.MainPic.src=imgPath[(picNum-1)].src;
    if(document.getElementById){
      document.getElementById('changeStr').innerHTML=imgExplain[(picNum-1)];
    } else if(document.all){
      document.all('changeStr').innerHTML=imgExplain[(picNum-1)];
    } else if(document.layers) {
      with(document.layers['changeStr'].document){
        open();
        write(imgExplain[(picNum-1)]);
        close();
      }
    }
  }
}

-->
</SCRIPT>
</HEAD>
<BODY>
<TABLE>
  <TR>
    <TD COLSPAN="2">
      <DIV ID="changeStr"><FONT SIZE="-1">■1.雪の豊平　その1</FONT></DIV>
    </TD>
  </TR>
  <TR>
    <TD COLSPAN="2">
      <IMG SRC="images/sample03.jpg" ALT="豊平町　雪の写真" NAME="MainPic">
    </TD>
  </TR>
  <TR>
    <TD>
      <INPUT TYPE="button" VALUE="BACK" onClick="changePic('-1')">
    </TD>
    <TD>
      <INPUT TYPE="button" VALUE="NEXT" onClick="changePic('1')">
    </TD>
  </TR>
</TABLE>
</BODY>
</HTML>
(太字の部分が「ボタンをクリックして画像を入れ替える」サンプルから、新たに追加した部分です。)


今回のポイントは、innerHTMLプロパティを利用して、文字を変化させている点です。
<DIV>のNAME属性に「changeStr」、<IMG>のNAME属性に「MainPic」とそれぞれ付けて、MainPicのSRCで画像を変更させ、changeStrをinnerHTMLで書き換えています。
「ボタンをクリックして画像を入れ替える」だけだと、あまり実用的でないと思い、作成してみました。
画像や文字を追加する場合は、imgvalueの値を変更して、imgPathとimgExplainをそれぞれ追加してください。

サンプル
■1.雪の豊平　雪の中の山々
豊平町　雪の写真


▲BACK


IT SOHO CLUB