/* --------------------------------------------------------------------------
  ■サムネイルがマウスオーバーされたらメイン画像を入れ替えるスクリプト■
  ※onMouseOverに入れ替え画像のパスを指定する場合※
  --------------------------------------------------------------------------
  メイン画像に
  <img src="..." id="○"> としてidを設定してください
  
  サムネイル側は
  <div id="△"> としてidを設定してください
    <img src="..." id="◎" onMouseOver="changeImg('◎','画像パス')"> として画像にもidを設定してください
    ...
  </div>

  →設定値をjsの「★設定」に記述してください

-------------------------------------------------------------------------- */

// ■サムネイルがマウスオーバーされたらメイン画像を入れ替える
function changeImg(thumbId, filePath)
{
  // ★設定
  var mainImgId = 'main_photo';  // メイン画像のid


  // メイン画像を変更
  document.getElementById(mainImgId).src = filePath;

  // サムネイルに目印をつける
  selectImg(thumbId);
}


// ■現在のメイン画像のサムネイルに目印をつける
function selectImg(imgId)
{
  // ★設定
  var thumbnailDivId = 'thumbnail';  // サムネイル群のdiv id
  if(!imgId){ imgId = 'main_img'; }  // デフォルトでメイン表示している画像のサムネイルのdiv id
  var addStyleName = 'active';       // 目印に使用するstyleの名前


  // サムネイル画像を全て評価
  var thumbnails = document.getElementById(thumbnailDivId);
  var thumbnailImgs = thumbnails.getElementsByTagName('img');
  for(var i=0; i<thumbnailImgs.length; i++)
  {
    var select = thumbnailImgs[i];
    var selectId = select.id;

    // 選択された画像を強調表示・それ以外は強調表示を外す
    if(selectId == imgId)
    {
      setImgStrong(selectId, addStyleName);
    }else{
      reSetImgStrong(selectId);
    }
  }
}
function setImgStrong(imgId, addStyleName)
{
  // スタイルをつける
  if(!addStyleName){ addStyleName = 'active'; }
  document.getElementById(imgId).className = addStyleName;
}
function reSetImgStrong(imgId)
{
  // スタイルを外す
  document.getElementById(imgId).className = 'nomal';
}


// ■Onload
window.onload = function()
{
  selectImg();
}