![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?8acaa2e)
初心者です。いろいろなサイトを参考にして、何とかボタンで画像を切り替える画面を作りました。
<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のみです。
説明がわかりにくく大変申し訳ないんですが、教えて頂けると幸いです。宜しくお願いします。
![「swfの動画と静止画をボタンで切り替えた」の質問画像](http://oshiete.xgoo.jp/_/bucket/oshietegoo/images/media/c/24864748_5497d27dddb64/M.jpg)
No.2ベストアンサー
- 回答日時:
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
- 回答日時:
画像の切り替えをどのような機能(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はきちんと表示され、ボタンもあるんですが、ボタンを押すとボタンも画像も消失してしまいます。何か他に問題でもあるんでしょうか。もしかすると私のやり方でどこかおかしい点があるのかもしれませんが・・・再度確認してみます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
- JavaScript アップロードファイルの種類によって処理を分岐させたいのですが書き方が分からずアドバイスお願いします 4 2023/06/17 19:12
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- VR・AR YoutubeでVRゴーグル用の切り替えボタンが表示されない? VRゴーグル(中にスマホを入れるタイ 3 2022/10/20 10:27
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
Giam
-
potplayerについて質問です
-
バナー広告の事に質問です! 広...
-
何種類の値があるかを調べる方...
-
Flashvars getURLの書き方
-
FLASHでゲームを作っていた人は...
-
この曲はなんでしょう?
-
laptop go2からの買い替え、lap...
-
スクリップト
-
私のコンピューター上のファイ...
-
arduino プログラムについて
-
chrome flash
-
FLASHの再生はできないのでしょ...
-
フラッシュゲームアーカイブ2
-
ウェブサイトで Flash が事実上...
-
Flashコンテンツを使ったWebサイト
-
Flash Playerのサポートが終了
-
Form内のselectを連動させるに...
-
Flashをブロックしないで
-
ダウンロードしたデジブックはa...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
全画面のflash
-
swfの動画と静止画をボタンで切...
-
ブラウザ内の動画再生(QuickTi...
-
as3のリンクについて
-
ホームページビルダー12にタ...
-
フラッシュプレイヤーのバージ...
-
ブログに音楽プレイヤーを設置...
-
Flash配置で横スクロールバーを...
-
Dreamweaverでポップアップメニ...
-
HPに埋め込みYouTubeの画面を1/...
-
FireFoxだとFLASHコンテンツが...
-
htmlからswfファイルへのリンク...
-
FLASHをプリントさせない方法
-
HPの背景をFLASHにしたい
-
Dreamweaver8でF...
-
Flashの横サイズ
-
ホームページの以下のページに...
-
word
-
名古屋の栄と錦は治安悪い?
-
数式中の文字をCambria Math以...
おすすめ情報