| ページ一覧 | ブログ | twitter |  書式 | 書式(表) |

MyMemoWiki

JavaScript 画像の切替

提供: MyMemoWiki
2020年2月15日 (土) 08:03時点におけるPiroto (トーク | 投稿記録)による版
ナビゲーションに移動 検索に移動

JavaScript 画像の切替

テンプレート:Ref imageUpdate.lzh

<html>
<head>
<script>
  var close_normal_img  = new Image();
  close_normal_img.src  = "./close_normal.jpg";
  var close_over_img    = new Image();
  close_over_img.src    = "./close_over.jpg";

  var fld_open_img      = new Image();
  fld_open_img.src      = "./fld_open.jpg";
  var fld_close_img     = new Image();
  fld_close_img.src     = "./fld_close.jpg";

  function openFolder(img, fldId) {
    var fld = document.getElementById(fldId);
    
    if (fld.style.display == 'block') {
        fld.style.display = "none";
        img.src = fld_close_img.src;
    } else {
        fld.style.display = "block";
        img.src = fld_open_img.src;
    }
  }
  function closeImgUpdate(img, isMouseOver) {
    if (isMouseOver) {
        img.src = close_over_img.src;
    } else {
        img.src = close_normal_img.src;
    }
  }
</script>
</head>
<body>
    <div>
      <img src="./fld_close.jpg" onclick="javascript:openFolder(this,'fld_div');">
    </div>
    <div id="fld_div" style="display:none;">
      <img src="./close_normal.jpg" onmouseover="closeImgUpdate(this,true);" onmouseout="closeImgUpdate(this,false);">
    </div>
</body>
</html>