• ベストアンサー

クリックして拡大するjsの画像がFlash画像の下に入ってしまいます

お世話になっております。 言葉で説明するのが難しいのでテストサンプル?を用意したので、見て下さい。 下の小さいマップ画像をクリックすると大きくなるのですが、上のFlash画像の上に来て欲しいのに下にいってしまいます・・・ どうすれば直りますでしょうか? http://takeoff-agp.beautypal.net/sample/test/test.html jsの内容も記述した方がよろしいでしょうか? 大変困っています・・・ すみませんが宜しくお願い致します。

  • HTML
  • 回答数1
  • ありがとう数1

質問者が選んだベストアンサー

  • ベストアンサー
  • BlurFiltan
  • ベストアンサー率91% (1611/1754)
回答No.1

原因も対処法も "一応" わかりますよ。 原因はブラウザの仕様です。 Flash に限らず EMBED とか OBJECT で貼り付ける動画は最前面に表示されます。 一応の対処法は, Flash を HTML に貼り付けるときのタグに <param name="wmode" value="transparent"> とか EMBED の中に wmode=transparent を加えるのです。 本当は,これを書くとFlashの背景が透明になる(背景がなくなってHTMLの背景になる)のですが, 同時に上にものを重ねて表示できるようになります。 ご質問のものの場合は, 外部JS でこの辺を指定しているようですから, Flash を貼り付けるタグを生成する部分に上のようなものを入れれば良いと思います。 "一応" と何度も念を押しているのは, Windows+IE くらいがその対処法で対処できるのです。 Mac などや他のブラウザでは対処できないと思った方が良いです。 では,そういう場合のさらなる対処法はどうするかと言うと, PHP などで閲覧ブラウザを判定して, ブラウザによってページを振り分けるということをします。 かつてはAdobeサイトでもそういうことをしていた時期があります。 (Adobeサイトでは プルダウンメニューの下側にFlashを置いていました。そしてブラウザによっては Flash の部分を JPEG にすり替えていました。) しかし面倒です。 またどっちにしてもFlashと何かが重ならないようなページを作成する必要があります。 ですから結局, 「Flashの上に何も重ねないようにする」 というのが最善の策になります。

nyantan003
質問者

お礼

早速のご回答有り難うございます!! なるほど、、、大変勉強になりました。 winのIEだけ対応となると考えてしまいますね・・・ だからと言ってPHPの知識もありませんし・・・ マップの拡大画像表示の別の表示方法で考えてみます。 (アクセスのページに飛ぶようにするとか) 有り難うございました^^

関連するQ&A

  • JSがうまく動作しません

    スムーズスクロールJSがうまく機能しません。 http://aichi-jimkyo-ichinomiya.org/sample_ok.htm これはコピペですが 文字化けしていますが、一番下のリンクをクリックするとスムーズに上へ戻ります。 スムーズスクロールがきちんと機能しています。 http://aichi-jimkyo-ichinomiya.org/sample_ng.htm 一から作ったこちらは機能しません。 何が間違っているのか理解できないので、 どなたか詳しくお分かりになられる方、教えてください。

  • validator.jsのサンプルについて

    http://kachibito.net/sample/validate-js/ で紹介されています"validator.js"の サンプルですが、勉強がてらソースを拝見させてもらっておりますが、疑問が あります。 submitボタンをクリックすると、必須チェックや妥当性チェックが走るようなのですが、 submitのところにonclickイベントなども明記していないのに、どうしてチェック処理が 動作するのでしょうか? formタグの記述にも特別なことは書いておりませんし、headタグ内にもvalidator.jsを 読み込んでいるだけですし、どこでsubmitクリックを検出しているのかが不明です。 ご教授頂くことはできないでしょうか。 よろしくお願いします。

  • 画像クリック→「部分的に」拡大

    いつもお世話になっています、 http://store.uniqlo.com/L4/getitem.asp?hdnItemMngCD=k36133 このユニクロのページのように「拡大画像をみる」のウインドウの中で好きな場所でクリックすると、その部分だけが拡大して見ることができると思うのですが、これはフラッシュですか?どのような仕組みでしょう? いろいろ検索してみたのですが、解説のページなどが見つかりませんでした。 ご存じの方がいらっしゃいましたら教えてください!

  • aaa.jsの作り方。

    HPで更新するたび画像をランダム表示をするやり方を教えて下さい。 一応自分はビルダーを使ってフレームを縦に二つ分割 そして右側にだ増ランダム表示をしたいのですが 参考としたサイトに 【まず、「aaa.js」というjavascriptのファイルを作成します。「.js」というのは javascriptの拡張子です。そのファイル内に、以下のソースを記述してみます。 (img要素内のwidthやborderなどの属性は、サンプルを見難くするので省いています。適度付け足してください)】 とありました。 この「aaa.js」はどうやって創ればいいのですか? 単にメモ帳に拡張子をjsとうてばよいのでしょうか? 教えてください

  • サムネイル画像をオンマウスで拡大表示してそれぞれの画像にリンクを指定する記述について

    お世話になります。 JavaScript初心者ですが、フリーソースなどを見つつ勉強しております。 下記のようなhtmlに【js00】と【js01】を読み込んでサムネイル画像をオンマウス時に上部に拡大表示させているのですが、サムネイル画像と拡大表示画像の両方に指定リンクをつけようとしています。 記述4の【js02】のような画像をランダム表示して指定リンクをつけるScriptは発見できたのですが、これを記述1+2+3と組み合わせられず、作業が進まなくなってしまいました…。 フリーソースを応用しようとしすぎて、遠回りな記述になっているかもしれませんが、もし分かる方がいらっしゃったら教えて頂けないでしょうか? ■記述1(html) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <SCRIPT language="JavaScript" type ="text/javascript" src="http://test.com/00.js"> </SCRIPT> </head> <body> <table width="400"> <a href="#" target="_blank"> <img src="http://test.com/img/01.jpg" name="imgSample"></a> <div> <div> <script language="JavaScript" type ="text/javascript" src="http://test.com/01.js"> </script> </body> </html> ■記述2(js00) //画像の名前を配列に代入していきます。 strPictureName = new Array("http://test.com/img/01.jpg","http://test.com/img/02.jpg","http://test.com/img/03.jpg","http://test.com/img/04.jpg","http://test.com/img/05.jpg","http://test.com/img/06.jpg","http://test.com/img/07.jpg","http://test.com/img/08.jpg"); function SetPicture(nVal) { document.imgSample.src = strPictureName[nVal]; } ■記述3(js01) //サムネイル画像をオンマウスで拡大表示 img_num="8"; if( img_num == "" ){img_num='5';} for ( cnt = 1 ; cnt <= img_num ; cnt++ ) { cnt2 = cnt-1; document.write( "<a href=\"#\" onMouseOver=\"SetPicture("+cnt2+");\" class=\"menu\"><img src=\""http://test.com/0"+cnt+".jpg\" width=\"100\" height=\"86\"></a>" ) ; } ■記述4(js02) // ランダムに画像を表示する jmp = new Array(); img = new Array(); // ジャンプ先のアドレス(数字は画像と対応) jmp[0] = "http://www.yahoo.co.jp/"; jmp[1] = "http://bb.yahoo.co.jp/"; jmp[2] = "http://www.yahoo.co.jp/"; jmp[3] = "http://auctions.yahoo.co.jp/"; jmp[4] = "http://aeu.jp/cs/"; jmp[5] = "http://google.com/"; jmp[6] = "http://google.co.jp/"; jmp[7] = "http://news.yahoo.co.jp/"; // 画像のアドレス(数字はジャンプ先のアドレスと対応) img[0] = "http://test.com/01.jpg"; img[1] = "http://test.com/02.jpg"; img[2] = "http://test.com/03.jpg"; img[3] = "http://test.com/04.jpg"; img[4] = "http://test.com/05.jpg"; img[5] = "http://test.com/06.jpg"; img[6] = "http://test.com/07.jpg"; img[7] = "http://test.com/08.jpg"; n = Math.floor(Math.random()*jmp.length); document.write("<a href='"+jmp[n]+"'>"); document.write("<img src='"+img[n]+"' border='0'>"); document.write("</a>"); ■完成イメージ   | ̄ ̄ ̄ ̄ ̄ ̄ ̄|   |  拡大画像  |   |_______|   | ̄|| ̄|| ̄|| ̄|   |_||_||_||_|←サムネイル ・サムネイル画像をオンマウスで拡大画像を表示 ・サムネイル画像、拡大画像それぞれに指定リンクを入れる ・可能であればリンクページは target="_blank" で開きたい 以上がご質問内容です。 初心者で大変恐縮ですが、どうぞよろしくお願いいたします。

  • FLASH8についての質問

    FLASH初心者です。例えば、ドキュメント上にボタンが3つあり、それをクリックすると、画像がでてくるようにします。それで、常に、クリックしたボタンで出る画像を一番上に表示するようにしたいのですが、どうすればよいでしょうか?swapDepthsを使えばできますでしょうか? すみません。よろしくお願いします。

  • yuga.jsを使うとロールオーバー画像が表示されない

    お世話になっております。質問させてください。 現在メニューの画像をyuga.jsに入っていないスクリプトで ロールオーバーさせているのですが、 ある1ページにだけ yuga.js関係のスクリプトを使用した所、 そのページのメニュータイトル画像だけが 表示されなくなってしまいました。 (マウスを載せるとロールオーバー後の画像は出てくるのですが) http://www.geocities.jp/meguri_mizu/test/pc/2008.html ↑こんな感じです…。左上の「役に立つパソコン」の部分です。 firefoxだとずっとマウスオーバーした時の画像が表示されたままになってしまいます。 yuga.jsでできる、名前に_onをつけてのロールオーバーにしても やっぱり自ページのメニューだけがうまく表示されません。 なぜなのでしょうか…? スクリプトが読めないのでどう直していいのか全然わかりません;; よろしければご教授ください。お願いします…。

  • ぼやけた画像を上から下に徐々に鮮明にしていくFLASH

    1枚でできるならそれに越した事はないんですが、 ぼやけた画像と元々の鮮明な画像を用意して、 ぼやけた画像を上から下に徐々に鮮明にしていくFLASHを作る事はできますか? 最終的には携帯で見れるようにしたいです。 正確には、  (1)画像全体がぼやけた画像  (2)右半分だけ鮮明な画像  (3)画像全体が鮮明な画像 と3枚程の画像を使って、 (1)を(2)に上から下に変化させていくと 左半分は同じぼやけですから右半分だけクリーニングしたように綺麗になっていく。 次は(2)を(3)に(以下略) という風にしたいんです。 検索しても出てこなくって…。 JAVAを使った方法なら出てきたんですが、 これだと携帯に送って再生というのはできないので…。 (ちなみにこれの値は12。リンク先では違うが「上から下へ変化」です。) http://www.ka8.koalanet.ne.jp/~s_hirano/imagechanger/image_changer.html

  • 画像のプリロード

    jqueryを使い、下のようなサイトを作っています。(URL先はサンプル) http://s1.shard.jp/studioy/test2/ 横に大きな画像を一枚使っており、ページを開くと同時に画像がスライドし、一番最後まで流れたらストップ、右側のリンクで希望の画像までスライドできるようになっています。 動きに支障はないのですが、最初に読み込んだときに画像が完全に読み込まれておらず、徐々に表示されてしまいます。 一応、jsでプリロードさせているのですが、環境によってなのでしょうか。 jsで読ませる他に、何か方法はないでしょうか? どなたか詳しい方、ご教示下さい。

  • jqueryで画像を切り替えたい

    以下ソースがあります。 ●main.js $(function(){ jQuery.ajax({ url : "./news.txt", type : "get", success : function(data){ alert(data); } }); }); ●news.txt test と記述しています。 ●index.html <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>jQuery Sample</title> <script type="text/javascript" src="jquery-1.7.1.min.js"></script> <script type="text/javascript" src="main.js"></script> </head> <body> <h1>jQueryサンプル</h1> <p>非同期通信の処理</p> </body> </html> この三つのファイルを同じ階層に置き、index.htmlで実行したところ 非同期通信(testのアラート)が表示されました。 そこで、 index.htmlファイルの左側にメニューを設けて、 メニューをクリックすると、画像のみが切り替わるという 内容で、jqueryによるajax実装を行いたいのです。 (左のメニュー1がクリックされれば、リンゴの画像。  メニュー2がクリックされれば、みかんの画像等) ulタグと、jquery関数にどういう仕掛けを入れると 果物画像の入れ替えが行えるでしょうか。 ご教授お願いします。

    • ベストアンサー
    • AJAX