Flashって大変

仕事で、フルウィンドウ(swf自体をブラウザウィンドウいっぱいの大きさ)のswfを背景に敷いて、htmlでコーディング(html自体は普通のもの)するって事をやろうとしていて、とても苦労をしました汗

ウチの会社で作っているHPって、そんなに凝ったデザインのものは作っていないので初めてづくしで大変でしたたらーっ

最初にflashを背景に敷いてhtmlでページを作るやりかたを紹介しているサイトを隣の席の子に教えてもらって、実践してうまくいったのですが・・・残念なことにIE7には対応していなかったみたいで表示されませんでしたポロリ

downやり方を紹介しているサイトdown
http://blog.design-life.jp/?eid=222291

これのサンプル2がそうなのですが、どうも私がコーディングしたページには合わなかったみたいで表示が全くされませんでした。

原因はやっぱりz-indexがいけないみたい。

このやり方は簡単に言えば、z-index:-1でflashを一段階下に設定して、htmlを上に乗せる方法です。

IE6とFirefoxでは、htmlの大元にz-indexを設定しなくてもflash自体に-1が設定されていれば下に潜ってくれるんですけど、IE7はちゃんとhtmlのコンテンツにもz-indexを設定しなければいけないみたいです。

結局、jsは使わないでcssでflashとコンテンツに大枠を作って設定をして入れました。
flashも結局は直でソースに書いて入れたので、SEOもあんまり反映されないくらいソースの長いものになってしまいましたノーノー
もっと知識があればよかったんですけどね・・・。

それと、直でflashを入れたところに
'wmode', 'transparent'
をいれないと重なる仕様にはならないので注意が必要ですね。

flashの直で入れたソース


<div id="flash">
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','100%','height','100%','src','fla_img/top','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','.swfを外したファイル名','wmode', 'transparent' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="100%" height="100%">
<param name="movie" value="swfファイル" />
<param name="quality" value="high" />
<embed src="swfファイル名" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="100%" height="100%"></embed>
</object></noscript>
</div>


id="flash"のcssの中身は

#flash {
position: absolute;
height:100%;
width:100%;
top:0;left:0;
z-index:-1;
}

cssと直書きソースのflashの幅と高さは100%にしないとエライことになります汗

で、htmlのコンテンツ部分には「wrpper」って名前で大きくdivで囲ってあげてます。
cssはdown

#wrpper {
z-index:100;
position:absolute;
width:100%;
height:100%;
}

一応これで色々なブラウザで確認できたのでOKかなぁ・・・。
未だにIE6を使われている人が旦那曰く2割はいるらしいのですが、もうIE8も出ているので、諦めて下さいたらーっ
IE6の問題さえなくなれば、私たちの仕事も大分楽になるんですけどね・・・。

以上、覚書でしたたらーっ
コメントする








   
この記事のトラックバックURL
トラックバック
|

カレンダー

S M T W T F S
      1
2345678
9101112131415
16171819202122
23242526272829
30      
<< June 2019 >>

お気に入りグッズ

お気に入りグッズ

36ピース クムクムパズル 映画妖怪ウォッチ 誕生の秘密だニャン!  フユニャン
36ピース クムクムパズル 映画妖怪ウォッチ 誕生の秘密だニャン! フユニャン (JUGEMレビュー »)

妖怪ウォッチクムクムパズルの第四弾!ついにフユニャンも立体商品化!

お気に入りグッズ

お気に入りグッズ

お気に入りグッズ

32ピース クムクムパズル 妖怪ウォッチ コマさん KM-55
32ピース クムクムパズル 妖怪ウォッチ コマさん KM-55 (JUGEMレビュー »)

なかなか妖怪ウォッチ関連でフィギュアが出ないね〜

お気に入りグッズ

フック ブック ロー 日々はんせい堂 あきない中 [DVD]
フック ブック ロー 日々はんせい堂 あきない中 [DVD] (JUGEMレビュー »)

ついに新作DVDキタ━━━━(゚∀゚)━━━━!!…そろそろブルーレイにならんかね?

お気に入りグッズ

NHKフックブックロー ラブをプレゼント
NHKフックブックロー ラブをプレゼント (JUGEMレビュー »)
TVサントラ,谷本賢一郎,中尾隆聖,折笠富美子,天野ひろゆき,浦嶋りんこ
待望のフックブックローのCD第四弾!

お気に入りグッズ

NHK フックブックロー あした元気になあれ
NHK フックブックロー あした元気になあれ (JUGEMレビュー »)
VARIOUS
待望の第三弾!! 「おいかけるんだ青い鳥」、「ありがとうアンデルゼン」を含む22曲収録ですよー

お気に入りグッズ

NHK フックブックロー のんびりいこうよ
NHK フックブックロー のんびりいこうよ (JUGEMレビュー »)
VARIOUS
フックブックローのCD第2弾!お母さんも大好きな曲が収録される予定!

お気に入りグッズ

NHKフック ブック ロー ちょっと 深呼吸
NHKフック ブック ロー ちょっと 深呼吸 (JUGEMレビュー »)
ヴァリアス
息子ちゃんが大好きな番組。録画して見せると喜びます。

お気に入りグッズ

モンスターハンター絵本〈1〉アイルー・メラルーとニャらめっこ! (カプコンオフィシャルブックス)
モンスターハンター絵本〈1〉アイルー・メラルーとニャらめっこ! (カプコンオフィシャルブックス) (JUGEMレビュー »)
清野 義孝,竹越 ななお,カプコン『モンスターハンター』開発チーム

この絵柄のアイルー好きにはたまらない絵本!!一緒にニャらめっこし〜ましょ♪

お気に入りグッズ

モンスターハンター絵本〈2〉チャチャとアイルーの元気にあいさつっチャ! (カプコンオフィシャルブックス)
モンスターハンター絵本〈2〉チャチャとアイルーの元気にあいさつっチャ! (カプコンオフィシャルブックス) (JUGEMレビュー »)
清野 義孝,竹越 ななお,カプコン『モンスターハンター』開発チーム

アイルー絵本その2!これまたアイルー好きにはたまりません!!

最近の記事

記事の種類

過去の記事

コメント

トラックバック

  • 花火大会の季節ですね
    花火
  • 一番くじモンハン日記ぽかぽかアイルー村の詳細
    教えてください
  • 使いやすい携帯機種ってどこだろう・・・
    これ欲しい

ブログ内検索

書いてる人

リンク

その他RSSなど

Twitter

携帯でも

qrcode

ブログ元

無料ブログ作成サービス JUGEM