ウェブ-HACKS 「とりあえずやってみよう！」ブログでタグ「JavaScript」が付けられているもの

またまた、依頼により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の本です。リファレンス的な本なのでちょっとした調べものには最適ですよ。

ちょっとお願いされて、サムネイル画像上にマウスオーバーすると、メイン画像が切り替わるJavaScriptをつくりました。シンプルなソースなのでアップします。JavaScriptよくわからずに作ったので、 あまり上手なつくりでないかもしれません。

＜html＞
＜head＞
＜title＞Photo Change＜/title＞
＜script language="javascript" type="text/javascript"＞＜!--
var image="./images/01.jpg";
var title="Sample";
var space=" ";

onload = function(){
  resetImage();
}

function viewImage(){
  document.getElementById("image").src=image;
  document.getElementById("image_title").innerHTML=title;
}

function resetImage(){
  document.getElementById("image").src="./images/space.jpg";
  document.getElementById("image_title").innerHTML=space;
}
--＞＜/script＞
＜/head＞
＜body＞
＜div id="wrap"＞
  ＜div id="main"＞
    ＜h1＞Photo Gallery＜h1＞
    ＜img id="image" /＞
    ＜div id="image_title"＞＜/div＞
  ＜div＞
  ＜hr /＞
  ＜div id="thumbnail"＞
    ＜img src="images/01.jpg" width="100" onMouseOver="javascript:viewImage(this)"
     onMouseOut="resetImage()" /＞
  ＜/div＞
＜/div＞
＜/body＞
＜/html＞