トップ 一覧 ping 検索 ヘルプ RSS ログイン

JavaScript 画像の切替の変更点

  • 追加された行はこのように表示されます。
  • 削除された行はこのように表示されます。
!!!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>