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

MyMemoWiki

「JavaScript 画像の切替」の版間の差分

提供: MyMemoWiki
ナビゲーションに移動 検索に移動
(ページの作成:「==JavaScript 画像の切替== {{ref imageUpdate.lzh}} <html> <head> <script> var close_normal_img = new Image(); close_normal_img.src = "./close_norma…」)
 
2行目: 2行目:
  
 
{{ref imageUpdate.lzh}}
 
{{ref imageUpdate.lzh}}
  <html>
+
  &lt;html&gt;
  <head>
+
  &lt;head&gt;
  <script>
+
  &lt;script&gt;
 
   var close_normal_img  = new Image();
 
   var close_normal_img  = new Image();
 
   close_normal_img.src  = "./close_normal.jpg";
 
   close_normal_img.src  = "./close_normal.jpg";
33行目: 33行目:
 
     }
 
     }
 
   }
 
   }
  </script>
+
  &lt;/script&gt;
  </head>
+
  &lt;/head&gt;
  <body>
+
  &lt;body&gt;
     <div>
+
     &lt;div&gt;
       <img src="./fld_close.jpg" onclick="javascript:openFolder(this,'fld_div');">
+
       &lt;img src="./fld_close.jpg" onclick="javascript:openFolder(this,'fld_div');"&gt;
     </div>
+
     &lt;/div&gt;
     <div id="fld_div" style="display:none;">
+
     &lt;div id="fld_div" style="display:none;"&gt;
       <img src="./close_normal.jpg" onmouseover="closeImgUpdate(this,true);" onmouseout="closeImgUpdate(this,false);">
+
       &lt;img src="./close_normal.jpg" onmouseover="closeImgUpdate(this,true);" onmouseout="closeImgUpdate(this,false);"&gt;
     </div>
+
     &lt;/div&gt;
  </body>
+
  &lt;/body&gt;
  </html>
+
  &lt;/html&gt;

2020年2月15日 (土) 08:03時点における版

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>