- ベストアンサー
html内でのマウスオーバー時に、他の場所でswfを表示させたい
- htmlで作成したページ内でマウスオーバー時に、別の箇所でswfを表示させる方法についてわからない
- h1タグの箇所に配置されたimgタグをswfに変更する方法についても教えてください
- マウスオーバーするメニューごとに表示させるswfを変更したい
- goodneco2005
- お礼率33% (2/6)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
単純にh1タグにid属性を付けてinnerHTML()で差し替えるのが簡単かも。 もっと良いやり方があるかもしれないけど とりあえずIE7で動いたので投下してみます。 (注意：全角空白でインデントしています) <html> <head> <script language="javascript" type="text/javascript"> <!-- /** * フラッシュファイルを差し替えてid="swf_screen"の箇所に表示する * 引数にnullを指定した時は、ロゴ画像を表示する * @param swfName swfファイル名 * @param width 幅 * @param height 高さ */ function flipSwf(swfName, width, height){ var screen= document.getElementById("swf_screen"); var swfDoc= null; if (swfName!= null){ // フラッシュ表示用のタグを作る（ベタだけど…） swfDoc= '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"' + ' codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0"' + ' width="' + width + '" height="' + height + '" id="ex" align="">' + '<param name="movie" value="' + swfName + '">' + '<param name="quality" value="high">' + '<param name="wmode" value="transparent">' + '<param name="bgcolor" value="#FFFFFF">' + '<embed src="' + swfName + '" quality="high" wmode="transparent" bgcolor="#FFFFFF"' + ' width="' + width + '" height="' + height + '" name="ex" align=""' + ' type="application/x-shockwave-flash"' + ' pluginspage="http://www.macromedia.com/go/getflashplayer"> ' + '</embed>' + '</object>'; } else{ swfDoc= '<img src="img/logo.gif" alt="" width="252" height="125">'; } // 差し替え実行！ screen.innerHTML= swfDoc; } //--> </script> <title>フラッシュ差し替え</title> </head> <body> <h1 id="swf_screen" style="border: solid 1px #ff0000; width: 260px; height: 130px;"> <img src="img/logo.gif" alt="" width="252" height="125"> </h1> <ui> <li id="menu1"> <a href="about.html" onMouseOver="flipSwf(about.swf', 252, 125);" onMouseOut="flipSwf(null, 0, 0);">about</a> </li> <li id="menu2"> <a href="archive.html" onMouseOver="flipSwf('archive.swf', 252, 125);" onMouseOut="flipSwf(null, 0, 0);">archive</a> </li> </ui> </body> </html> もし、ちらつきや読み込み時間が気になるなら 最初にスタイルシートで visibility: hidden; で非表示状態にしておいて、マウスが乗ったときだけスクリプトで visibility: visible; にする方法でもいけそうですね。
お礼
ありがとうございます！ 早速試してみたところ、 まさに、求めていたものが可能になりました。 こんなに素晴らしいコード記入いただきまして、 本当にありがとうございます！ 感謝感謝です。