【HTML・JavaScript初心者向け】月ごとの画像をリンクとして配置する

実例

保育園のWebサイトで、「行事メニュー」を表すアイコンを、

毎月のイメージに沿ったものを、手作業で更新していました。

（5月なら、”こいのぼり”、6月は”梅雨っぽい感じ”、etc）

これを、【自動化】するために、コードで、“月ごとの画像をリンクとして配置する方法”を構築しました。

コード

<SCRIPT LANGUAGE="JavaScript">
function pic_change(){
 d=new Date();
 month=d.getMonth()+1;
 switch(month){
 case 1:
  document.write('<a href="リンク先URL"><img src="画像URL"></a>');
  break;
 〜case文2-12を省略〜
 default:
 }
}
</SCRIPT>

<SCRIPT LANGUAGE="JavaScript">
pic_change();
</SCRIPT>

javascriptは、htmlのファイル内に記述できるので、表示したいページを作ってるhtmlファイルに入力すればOKです。

デバッグしたい時は、switch文の前に、

month = 12;

のように、試したい月の数字を、monthに代入してみてください♪

終わり

これからちょくちょく、コーディングで自分がつまづいたことなども、まとめていこうと思います。。

のんびりのんびり。