このまえ、「あけましておめでとうございます。」とか言ってたのに、もうちょっとで１月も終わりですね・・・はやっ！！ この一ヶ月の間に、前回の「現場でつかえるWeb作成科」の受講生が「Webプログラマ」として就職が決まったり、コダマが5kg痩せたりと喜ばしいことがいろいろありました。
ども！お祝いにかこつけて外食でたくさん食いまくるスタッフのコダマです。
先々週に現在、株式会社クラリスで行っている求職者支援訓練（職業訓練）の「Webクリエイター養成科」のJavaScriptの授業で実習課題として出したプログラムを紹介します。
授業をしていて思ったのですが、一般的にプログラムは女子は苦手な人が多いみたいですね・・・プラモデルとか模型とかで小さい頃に遊んでいた男子は比較的、プログラムは好きみたいです。・・・余談でした。
今回は、Ajaxを使わずに、JavaScriptのみでプログラムして、サムネイル画像をクリックするとメイン画像がパッっと変わるというシンプルなギャラリーです。
ソースもかなりシンプルなので、既存のページにパッと追加することができるのではないでしょうか？
では、サンプルを見てみましょう。
（※サンプルを見るには【記事の続きを読む】をクリック）
では、ソースを解説します。
■HTML（head） - JavaScript
function chPt(imgSrc) {
document.photo.src = imgSrc;
}
//--></script>
HTMLのheadタグ内（または、外部JSファイル）に、上記のJavaScriptを記述します。サムネイル画像をクリックしたときに実行する関数chPt（）を定義しています。 関数の中身は、『name="photo"』の要素の『src』をクリックしたサムネイルの『src』と入れ替えるというものです。
■HTML（body）
<p class="thumb">
<img src="images/photo1.jpg" width="76" onclick="chPt(this.src);" />
<img src="images/photo2.jpg" width="76" onclick="chPt(this.src);" />
<img src="images/photo3.jpg" width="76" onclick="chPt(this.src);" />
<img src="images/photo4.jpg" width="76" onclick="chPt(this.src);" />
<img src="images/photo5.jpg" width="76" onclick="chPt(this.src);" />
</p>
HTMLのbody内では、画像を入れ替えるメイン画像とサムネイル画像を配置します。サムネイル画像は、大きな画像の『width』や『height』に小さなサイズを指定します。サムネイル画像には『onclick』イベントを指定して、クリック時に関数『chPt（）』を呼び出します。このとき、引数に『this.src』を指定し、クリックしたサムネイル画像の『src』属性の値を関数に渡します。
■CSS
cursor:hand;
}
CSSは、おまけのようなもので無くても動作します。 サムネイル画像にマウスカーソルを乗せたときにカーソルの画像が白抜きの矢印のままなので、リンクがあるような手の画像に変更するプロパティと値を設定しました。
スタイルを変更したいときは、ご自身でCSSなどを追加してください。
サンプルを用意しましたので、コチラからダウンロードしてください。
コメント (0)