トップ 差分 一覧 ping ソース 検索 ヘルプ PDF RSS ログイン

JavaScript 画像の切替



目次



記事一覧

キーワード

JavaScript 画像の切替


imageUpdate.lzh(636)

<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>



YAGI Hiroto (piroto@a-net.email.ne.jp)
twitter http://twitter.com/pppiroto

Copyright© 矢木 浩人 All Rights Reserved.