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