JavaScript: 2008年1月アーカイブ

またまた、依頼によりJavaScriptを作りました。フォトアルバムのようなサイトでサムネイルをクリックしてメイン画像を切り替えるということです。lightboxやAjaxを使ってみても良かったのですが、もっとシンプルに作りたかったのでスクラッチで書きました。

【要件】

• サムネイル画像をクリックしてメイン画像を切り替える
• メイン画像と一緒に画像タイトルも切り替える
• タイトルをクリックすると各画像の個別ページへ遷移する

Googleで「フォトアルバム JavaScript」で検索したら、いろいろな記事があったので参考にさせてもらいました。以下がコードです。

＜script language="javascript" type="text/javascript"＞
＜!--
var imgPath = 'images/';
function changeImage(image){
  document.getElementById("mainImage").src=imgPath+image;
}
//--＞
＜/script＞

＜img id="mainImage" /＞
＜a href="targetURL" id="mainLink"＞mainImageTitle＜/a＞
＜a href="JavaScript:void(0)" onclick="changeImage('main.jpg')"＞＜img src="thumbnail.jpg" alt="title" /＞＜/a＞

動作させるとFirefoxでは正常に動作するが、IEだと何故かmain画像が切り替わりません。そのため、ちょっとコードを修正しました。aタグを使用せず、imgタグでリンクするように修正。

＜script language="javascript" type="text/javascript"＞
＜!--
var imgPath = 'images/';
function changeImage(name, title, url){
  document.getElementById("mainImage").src=imgPath+name;
  document.getElementById("mainTitle").innerHTML=title;
  document.getElementById("mainTitle").href=url;
}
//--＞
＜/script＞

＜img id="mainImage" /＞
＜a href="targetURL" id="mainLink"＞mainImageTitle＜/a＞
＜img src="thumbnail.jpg" onMousedown="javascript:changeImage('main.jpg','imageTitle','imageURL' )"＞

これだとIEでも、Firefoxでも正常に動作します。参考にしてください。（マウスカーソルが変化しないためクリックできることがわかりずらいというデメリットもあります。これもどうにかできたような気がしますが・・・）

↓私が良く使うJavaScriptの本です。リファレンス的な本なのでちょっとした調べものには最適ですよ。