ロールオーバーサンプル（DOM＋イベントハンドラ）

PHP & JavaScript Room :: 設置サンプル

実行結果

サンプルボタン

設置サンプルのソース

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="utf-8">
   <title>ロールオーバーサンプル（DOM＋イベントハンドラ）</title>
   <script>
      window.onload=function(){
         document.getElementById("sw").onmouseout=function(){
            document.getElementById("swIMG").src="/content/img/btn/btn_off.gif";
            //this.firstChild.srcでもいい。
            //IMG要素のonmouseoutイベントがうまく取得できないようなので、span要素のイベントを取得。
         }
         document.getElementById("sw").onmouseover=function(){
            document.getElementById("swIMG").src="/content/img/btn/btn_on.gif";
            //this.firstChild.srcでもいい。
         }
      }
   </script>
<link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
<body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP &amp; JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
   <p>
      <span id="sw"><img id="swIMG" src="/content/img/btn/btn_off.gif" alt="サンプルボタン" /></span>
   </p>
</body>
</html>