swfの動画と静止画をボタンで切り替えたい

質問

初心者です。いろいろなサイトを参考にして、何とかボタンで画像を切り替える画面を作りました。

<td align="center" valign="middle" ><img id = "eveimg" src="画像.jpg" /><BR>
<form style="">
<INPUT TYPE="button"・・・・・

現状でこのような形になっています。JavaScriptもほとんどわからない状態なんですが、きちんとボタン切り替えは出来る状態になってます。ボタンで切り替える前段階で最初に表示されている「画像.jpg」の部分をswfの動画にしたいと思い、<img id = "eveimg" src="画像.jpg" />の部分を下記のように書き換えました。

<object type="application/x-shockwave-flash" data="動画.swf" style="width:570px;height:317px">
<param name="movie" value="動画.swf" valuetype="ref" type="application/x-shockwave-flash">
<param name="bgcolor" value="#ffffff">
<param name="loop" value="false">
<param name="quality" value="high">
</object>

確認してみると、動画はきちんと表示がされていますが、今まできちんと動作していたボタン部分が全く効かなくなり、切り替えできなくなってしまいました。ちなみにボタンは表示されていて、オンマウスや選択状態にもなるんですが、画像の部分が切り替わりません。切り替える画像は動画ではなく静止画なので、動画は最初に表示する動画.swfのみです。

説明がわかりにくく大変申し訳ないんですが、教えて頂けると幸いです。宜しくお願いします。

回答No.2

mat-21 · ベストアンサー

No1の者です。

すいません＞＜ 記述に間違いがありました。

▼HTML例）
<div id="eveimg0">
<object type="application/x-shockwave-flash" data="動画.swf" style="width:570px;height:317px">
<param name="movie" value="動画.swf" valuetype="ref" type="application/x-shockwave-flash">
<param name="bgcolor" value="#ffffff">
<param name="loop" value="false">
<param name="quality" value="high">
</object>
</div>
<div id="eveimg1"><img src="画像.jpg" /></div>
...(省略 文字数制限で書ききれない)...
<div id="eveimg8"><img src="画像.jpg" /></div>
<ul id="imgmenu">
<li><img src="切替ボタン1" onclick="changeImg(1);" /></li>
...(省略 文字数制限で書ききれない)...
<li><img src="切替ボタン8" onclick="changeImg(8);" /></li> <!-- ←ここ「1」じゃなくて「8」です -->
</ul>

えっと、ボタンを押すと全部消えちゃうって事ですが、
-----
<div id="eveimg0">ブロック</div>
<div id="eveimg1">ブロック</div>
<div id="eveimg2">ブロック</div>
<div id="eveimg3">ブロック</div>
<div id="eveimg4">ブロック</div>
<div id="eveimg5">ブロック</div>
<div id="eveimg6">ブロック</div>
<div id="eveimg7">ブロック</div>
<div id="eveimg8">ブロック</div>
-----
<ul id="imgmenu">
<li>切替ボタン1</li>
<li>切替ボタン2</li>
<li>切替ボタン3</li>
<li>切替ボタン4</li>
<li>切替ボタン5</li>
<li>切替ボタン6</li>
<li>切替ボタン7</li>
<li>切替ボタン8</li>
</ul>

細かい指定はともかく、上記のようになってますか？^-^;
<div id="eveimg0">
<div id="eveimg1">ブロック</div>
</div>
のように、divの中にdivが入ってたりしてませんか？

次のものが原因かわかりませんが、
Flashのparamの以下を追加してみて下さい。

<param name="wmode" value="transparent">

お礼

で、できました！！すごいーー　丁寧に教えて頂いてありがとうございます。嬉しい・・・　あとはボタンのレイアウトを整えてみます。

これだけのスキルは一体どうやったら身に着くものか。私には長い道のりですけど、頑張ろうと思います。本当にありがとうございました。

回答No.1

mat-21

画像の切り替えをどのような機能(JavaScript？)を使っているのかわかりませんが、この場合、画像を切り替えるというよりも画像やSWFが入ってるブロックレベルを有る無し(表示・非表示)で操作した方が良いかもしれません。

ここであえて「有る無し」と答えているのは、「表示・非表示」と言いたいのですが、今から言うCSSですと、
●表示・非表示　＝ visibility: visible(表示)・hidden(非表示)
●有る無し ＝ display: block(有る)・none(無し)
となるため、ニュアンスが違うのであえて使い分けしてます。

visibiltyをhiddenにしても表示は消えますがブロックレベルは消えてませんので、その部分がぽっかり空きます。
displayをnoneにすると、ソース上にはありますが、表示のブロックレベル自体を表示させません。よって、その下のブロックレベルが詰まって表示されます。

よって、このCSSの「display」機能とJavascriptを駆使すれば、何とかなるのでは無いでしょうか？
検索サイトで「javascript 表示・非表示」で検索するといろいろ出ると思うのですが。。。。

以下は参考ですが、レイアウトは考慮していません。
また、ブラウザ確認していないので、正常に動作しなかったらごめんなさいm(_ _)m

▼JavaScript例）
function changeImg(btnNo){
document.getElementById('eveimg0').style.display="none";
for(i=1;i<=8;i++){
if(i==btnNo){
document.getElementById('eveimg'+i).style.display="block";
}else{
document.getElementById('eveimg'+i).style.display="none";
}
}
}

▼CSS例）
#eveimg0 { display:block; }
#eveimg1,#eveimg2,#eveimg3,#eveimg4,#eveimg5,#eveimg6,#eveimg7,#eveimg8 { display:none; }

▼HTML例）
<div id="eveimg0">
<object type="application/x-shockwave-flash" data="動画.swf" style="width:570px;height:317px">
<param name="movie" value="動画.swf" valuetype="ref" type="application/x-shockwave-flash">
<param name="bgcolor" value="#ffffff">
<param name="loop" value="false">
<param name="quality" value="high">
</object>
</div>
<div id="eveimg1"><img src="画像.jpg" /></div>
...(省略 文字数制限で書ききれない)...
<div id="eveimg8"><img src="画像.jpg" /></div>
<ul id="imgmenu">
<li><img src="切替ボタン1" onclick="changeImg(1);" /></li>
...(省略 文字数制限で書ききれない)...
<li><img src="切替ボタン8" onclick="changeImg(1);" /></li>
</ul>

お礼

回答ありがとうございます！　初心者なので、このように丁寧に書いて頂けると、ほんとうにありがたく、嬉しいです。

やってみたんですが、最初のSWFはきちんと表示され、ボタンもあるんですが、ボタンを押すとボタンも画像も消失してしまいます。何か他に問題でもあるんでしょうか。もしかすると私のやり方でどこかおかしい点があるのかもしれませんが・・・再度確認してみます。