![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
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>
どなたか、ご存知の方、いらっしゃいませんか?よろしくお願いします。
No.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/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;
にする方法でもいけそうですね。
ありがとうございます!
早速試してみたところ、
まさに、求めていたものが可能になりました。
こんなに素晴らしいコード記入いただきまして、
本当にありがとうございます!
感謝感謝です。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS htmltとcssの連携をして画像縮小について 1 2022/11/15 20:32
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS htmlについて質問です! 写真のように写真の部分が?になってしまいます。 ファイルもしっかり選べて 1 2023/07/09 21:17
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- HTML・CSS FC2カートのテンプレートでの商品表示について 1 2023/03/02 18:05
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- HTML・CSS CSSが上手く反映されないみたいです 2 2022/11/21 16:19
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
Slick.jsのオプションrtlについて
-
【jQuery】2分割レイアウトで、...
-
html内でのマウスオーバー時に...
-
チェックボックスと画像切替の連動
-
jQuery bxSlider でのアニメー...
-
MAX関数を使ってからLEFT JOIN...
-
Vb.net2005での画像の合成方法
-
c++std::string型をTCHARに変換...
-
HTMLからimgのsrcのみを正規表...
-
IplImageのBmp変換。
-
<div ~ </div> で囲まれたテキ...
-
IFRAMEの表示/非表示を切り替え...
-
jqueryのsortableで一部ソート...
-
動的にHTMLコンテンツを吹き出...
-
変数名をどのようにつけるのが...
-
jQueryでシンプルドラッグドロ...
-
プルダウンの位置がwin/macでず...
-
クリックで色変更後に既に変更...
-
JSPでの画像ファイル表示
-
OpenCVの実行エラー
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Slick.jsのオプションrtlについて
-
同一ページ内の複数のタグに同...
-
【jQuery】2分割レイアウトで、...
-
キャラクターがぴょこんと飛び...
-
画像をフェードアウト&フェー...
-
jqueryのプラグインslickの画像...
-
html5に変えるとスライドショー...
-
Javaスクリプトで画像を縦にス...
-
high slideをFC2ブログで
-
ご教授ください。
-
jQueryでタブ、スライダーを使...
-
チェックボックスと画像切替の連動
-
jQueryのclickイベントハンドラ
-
javascriptで文字サイズの変更
-
fontsize.jsでhtmlの大中小の設...
-
【iOS及びAndroid】リンク画像...
-
Firefoxとクロームでフェードイ...
-
javascript src書き換え
-
神経衰弱 順番に裏返し
-
アコーディオンメニューが開い...
おすすめ情報