初心者です。いろいろなサイトを参考にして、何とかボタンで画像を切り替える画面を作りました。
<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ベストアンサー
- 回答日時:
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で質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
flashを正しく表示させるために...
-
as3のリンクについて
-
Flash配置で横スクロールバーを...
-
word
-
Illustratorテキストエリアへ塗...
-
PowerPoint SmartArtの箇条書...
-
名古屋の栄と錦は治安悪い?
-
数式中の文字をCambria Math以...
-
バイナリファイルの編集
-
テキストボックスからフォーカ...
-
illustratorとExcelは連携出来...
-
VB.NETのテキストボック...
-
VBA超初心者です。
-
項目数は英語で
-
Google マップに同心円と文字を...
-
capcutってアプリで質問です。 ...
-
人体切断マジックの事でお聞き...
-
Publisherをエクセルファイルに
-
ユーザーがクリックするまでフ...
-
VB.NET でのLaod/unLoad につ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Dreamweaverでポップアップメニ...
-
flashの表示サイズがMACだと大...
-
htmlからswfファイルへのリンク...
-
HTML4.01でFlashを組み込む方法...
-
全画面のflash
-
フラッシュからリンクを貼るには?
-
ブラウザ内の動画再生(QuickTi...
-
HPの背景をFLASHにしたい
-
swfを大きさ指定の別窓で表示
-
<embed>タグの表記について
-
HPに埋め込みYouTubeの画面を1/...
-
word
-
名古屋の栄と錦は治安悪い?
-
数式中の文字をCambria Math以...
-
Illustratorテキストエリアへ塗...
-
illustratorとExcelは連携出来...
-
PowerPoint SmartArtの箇条書...
-
イラレでダブルクリックで文字...
-
『μg』の読み方と意味。
-
バイナリファイルの編集
おすすめ情報