性格いい人が優勝

html内でのマウスオーバー時に、他の場所でswfを表示させたい

解決済

  • 質問者：goodneco2005
  • 質問日時：
  • 回答数：1件

htmlでページを作成しています。
そのなかで、マウスオーバーの際に、マウスオーバーした箇所（liタグの箇所）ではなく、別の箇所（h1タグの箇所）でswfを表示させたいのですが、方法がわかりません。
h1タグの箇所は、今imgタグを入れていますが、最初からswfをいれておいて、別のswfに変更というものでもいいのですが。

マウスオーバーするメニューごとに表示させるswfは変更したいです。

ソースは以下の通りです。
<html>
<head>
<body>
<h1>
<img src="img/logo.gif" alt="" width="252" height="125">
</h1>
<ul>
<li id="menu1"><a href="about">about</a></li>
<li id="menu2"><a href="archive.html">archive</a></li>
</ul>
</body>
</html>

どなたか、ご存知の方、いらっしゃいませんか？よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (1件)

No.1ベストアンサー

  • 回答者： mahny
  • 回答日時：

単純に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/cab …
　　　　　+ ' 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;
にする方法でもいけそうですね。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます！
早速試してみたところ、
まさに、求めていたものが可能になりました。
こんなに素晴らしいコード記入いただきまして、
本当にありがとうございます！
感謝感謝です。

通報する
お礼日時：2007/06/16 01:34

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報