インラインフレームの操作方法とは？
- ページの構成でサムネイル画像とインラインフレームを使用する方法についての質問です。
- サムネイルをクリックしてインラインに画像を表示させる方法について質問しています。
- JavaScriptとCSSを併用して画像をインラインに表示させる方法についてのヒントを求めています。
- ベストアンサー
インラインフレームの操作について
こんにちは。早速、質問させてもらいます。 ページの構成が、左側にサムネイル画像を10枚程度置いて 右側にインラインフレームをfloatして置いています。 で、サムネイルをクリックしてインラインに画像を表示させたいんです。 target='xxxで表示させることはできるんですが それだと画像ファイルに直接リンクすることになるので、 ページの統一感が出せません。 そこで、JavaScriptでCSSと併用させて画像を表示させようと思い、検索して window.frame['myframe'].loaction.href="xxx.jpg"; としてインラインの中に画像表示させることはできましたが、 これにcssを併用させる方法がわかりません。 何かヒントでもあれば、教えてください。 よろしく、お願いします。
- BoOoOoOo
- お礼率100% (9/9)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
これはどうでしょう？ IE6,NN7で確認しました。 <HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <PUBLIC:ATTACH EVENT="ondetach" ONEVENT="cleanup()" /> <TITLE></TITLE> <SCRIPT LANGUAGE=javascript> <!-- var imgbig = new Array(); imgbig[0] = "img1.jpg"; imgbig[1] = "img2.jpg"; imgbig[2] = "img3.jpg"; imgbig[3] = "img4.jpg"; var ifr; function cleanup(){ detachEvent("onclick", ig_onclick); } function window_onload() { ifr=document.getElementById("ifr"); ig = document.getElementsByTagName("IMG"); for(i=0;i<ig.length;i++) ig[i].onclick=ig_onclick; } function ig_onclick(){ ifr.src = imgbig[this.name]; } //--> </SCRIPT> </HEAD> <BODY LANGUAGE=javascript onload="return window_onload()"> <P> <TABLE border=1> <TR><TD> <IMG name="0" src="thmimg1.jpg"><BR> <IMG name="1" src="thmimg2.jpg"><BR> <IMG name="2" src="thmimg3.jpg"><BR> <IMG name="3" src="thmimg4.jpg"></TD> <TD> <IFRAME id=ifr></IFRAME> </TD></TR></TABLE> <P></P> </BODY> </HTML>
その他の回答 (1)
- ittochan
- ベストアンサー率64% (2667/4137)
IFRAMEのCSS？ <style type="text/css"> <!-- IFRAME { WIDTH:300px; HEIGHT:305px; } --> </style> </HEAD> こんな感じ？
お礼
すいません、質問のしかたがごちゃごちゃで 分かり難かったです。 一応、JavaScriptの質問でした。
関連するQ&A
- インラインフレームを使って、lightboxを表示させたい
メインページ上にインラインフレームを使用して、写真のサムネイルを並べています。 このサムネイルをクリックするとlightboxで表示されるようにしたいのですが、上手くいきません。 メイン画像に表示されず、インラインフレーム内で、lightboxが動作せず、画像がリンクするだけです。 メインのHTML（main.html）のheadに下記の記述をし、 【main.html】 <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> <script src="js/prototype.js" type="text/javascript"></script> <script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script> <script src="js/lightbox.js" type="text/javascript"></script> インラインフレーム内（in.html）のサムネイルには下記を記述しています。 【in.html】 <a href="images/001.jpg" rel="lightbox" title="テスト"><img src="images/p01.jpg" border="0"></a> ちなみに、上記のタグをメインのHTMLに記述すると、ちゃんとlightboxは動きます。 インラインフレーム内だと、動かないのです。 ソースのどの部分に手を加えると、メインページ上に、表示されるようになるのでしょうか。 アドバイスお願い致します。
- ベストアンサー
- HTML
- インラインフレームのリンク
インラインフレーム内にリンクを配置して、リンクをクリックすると現在見ているウィンドウにリンク先のページを表示したいと考えています。リンクに target="_top" を指定すれば、ウィンドウにリンク先が開かれると思うのですが、実際にやってみると、うまく開くときもありますがインラインフレーム内でウィンドウが開いてしまうことがあります。 現在見ているウィンドウ＞インラインフレーム＞インラインフレーム＞リンクのあるページ と複数のインラインフレームを介しているのが原因のように考えています。 リンクのあるＨＴＭＬにjQueryプラグインを使ったスライドショーを入れて、複数のインラインフレームを介して画像をクリックすると現在見ているウィンドウにその画像のあるページを開きたいのです。 インラインフレーム内でリンク先のページが開いてしまうのは、やはりリンクのtarget指定の問題でしょうか？それともjQueryプラグインの設定か何かの問題でしょうか？ アドバイスいただければ幸いです。
- ベストアンサー
- HTML
- クリッカブルマップとインラインフレームを組み合わせたい
こんにちは。自分でも検索してしらべたのですが、どうしてもわからないので、質問させていただきます。 現在、ページを製作中なのですが、タイトルのとおり、クリッカブルマップ画像の上にインラインフレームを組み合わせる方法がわからず、困っています。 透過したインラインフレームを、女の子の画像に重ねて表示してあります。この女の子の画像にメニューが書いてあるので、それをクリッカブルマップにして、インラインフレームにリンクを表示したいと思っています。 画像の上にインラインフレームを重ねて表示するのには成功しましたが、クリッカブルマップのタグを書き加えると、画面が真っ白になってしまいます。 クリッカブルとインラインを組み合わせたデザインのサイトは結構あるので参考にしようとしてみましたが今いちわからなくて・・・ 回答よろしくお願いします。
- 締切済み
- HTML
- インラインフレームについて
メインのページにインラインフレームをつくり、インラインフレームの文字やボタンをクリックするとwindow.openで画面を展開させたいのですが、画面を展開させて画面を閉じてみるとインラインフレームに [object]と表示されてしまします。 これを回避するにはどうしたらいいのでしょうか？ またこれは一体なんなのでしょうか？ どなたかご教授ください。お願いいたします。
- 締切済み
- JavaScript
- インラインフレーム内skitter画像ターゲット
jQueryを使ったスライドショーでskitterを利用しています。 skitterで作ったページをインラインフレームでトップページに表示しているのですが、画像をクリックしてターゲットのページを開く際、時々インラインフレーム内にターゲットのページが開いてしまうことがあります。特に画像アニメーションが完了していない状態でクリックするとインラインフレームの中に開いてしまうように思えます。 以下のように画像のコード部分でリンクの前にtarget指定で_topは指定してあるのですが・・。 <div class="box_skitter box_skitter_large"> <ul> <li><a target="_top" href="リンク/newpage1.html" > <img src="images/img01.jpg" /></a> <div class="label_text"><p>画像１</p></div> </li> <li><a target="_top" リンク/newpage2.html" > <img src="images/img02.jpg" /></a> <div class="label_text"><p>画像２</p></div> </li> </ul> </div> jquery.skitter.jsのほうで何かコードを変えないといけないのでしょうか？ それともインラインフレーム内でskitterの表示はよくないのでしょうか？ targetで_topを指定してあればうまく開くように思うのですが・・。 jQueryは初心者です。 ご存知の方、ぜひ対処方法をご教授ください。 よろしくお願いいたします。
- 締切済み
- JavaScript
- インラインフレーム（リンクについて）
メモ帳を使って、タグ打ちでHPを製作しています。 インラインフレームを使っているページにリンクする際に、下のようなことがしたいのですが、方法が分かりません。 インラインフレームを指定しているページを【A】とします。 【A】内に<a href=>タグでインラインフレームにターゲットを指定し、ページ【B】と【C】を表示させます。 【A】では<iframe src=>タグでページ【B】を指定します。 他ページからページ【A】に行くと、はじめには【B】が表示されると思います。 ここで、他ページからページ【A】に移動する際に、始めに【A】内にページ【C】を表示させたいのです。 普段はもちろん、ページ【B】を表示させるのですが、例外として【C】を表示させたいのです。 説明が難しいのですが、不足点や補足が必要でしたら追記します。 よろしくお願いします。
- ベストアンサー
- HTML
- インラインフレームについて
いろいろ調べてみたのですが分からないので教えてください。 一つのページ内に、インラインフレーム「A」と「B」を置き(つまり2つ) 片方のインラインフレーム「A」内に置いたリンクボタンをクリックしたら、 もう片方のインラインフレーム「B」内が変わるようにしたいのですが、targetはどう指定したらよいのでしょう。 例えば、 http://www.tagindex.com/html_tag/frame/i_index01.html こちらのページだと、 サンプル1にリンクを置いてサンプル2の表示が変わるようにしたいのです。 宜しくお願い致しますm(＿)m
- ベストアンサー
- その他（インターネット・Webサービス）
- インラインフレームを使った場合のtarget指定について
インラインフレームを使用してＨＰを制作しているのですがリンクのtarget指定で困っていることがあります。 インラインフレームにリンクを貼り、インラインフレームをそのまま表示した状態で親ページにリンク先を表示させたいのですが、 target="_parent" ではインラインフレームが解除されてしまいます。 やはりインラインフレーム付きのページを作って表示させるしか、解除させずに表示する方法はないのでしょうか？ 何か良い方法がありましたらご教授下さいませ。 宜しくお願い致します。
- ベストアンサー
- HTML
- インラインフレーム内でリンク移動
親ページ内のインラインフレームに表示したページで、リンク移動をしたいと考えています。 親ページはインラインフレームのみ ※楽●のカテゴリーページのため親ページにJavascriptなどはつけることができません。 インラインフレーム内の表示ページで、 例えば<a href="#sale">セール</a>とリンクを付け、そのインラインフレーム内のページの(id=sale)セールの項目へ移動させたいと考えています。 当初jQueryページ内移動、 http://web-park.org/javascript/scroll100126.html 上記サイトのコードを使用して試しましたが、インラインフレーム内ではだめでした。 何か上記のサイトのコードを変えればうまくいきそうな気もしましたが初心者なのでだめでした。 jQueryは使わず最も一般的な<a href="#sale">セール</a>⇒id=saleに変えましたが、こちらもインラインフレームではうまくいきません。 なんとかインラインフレーム内に表示するページのコードでリンク移動ができないものでしょうか？ ご存知の方ぜひご教授お願いいたします。
- ベストアンサー
- HTML
- 日記をインラインフレームに表示したい
多数ある日記（テキストファイル）を一ページずつインラインフレームに表示したいんです <a href="001,日記.txt" target="test"></a><br> <iframe src="top.htm" name="test" width="200" height="150"> 日記のファイル名は”001,日記.txt”など","で区切られています。 <a href="001,日記.txt" target="test"></a><br> <a href="002,日記.txt" target="test"></a><br>・・ の羅列も考えたのですが、日記はどんどん増えそうなのでテキストファイルの”,”の前の番号で管理したいのです。 ボタン”次へ”を押すと次のページを表示する感じにしたいです いろいろ参考を探してみたのですがピッタリなのがなくって・・悩んだ挙句質問にきました。お願いします
- 締切済み
- HTML
お礼
ありがとうございます。自分なりに作ってみたんですけど。。 function myChange(a){ var win=window.frames['myframe']; win.document.open(); win.document.write('<link rel="stylesheet" href="c2.css" type="text/css">'); win.document.write('<body>'); win.document.write('<p><img src="'+a+'" alt=""></p>'); win.document.write('</body>'); win.document.close(); } こうやって、 アンカーに<a href="#" onclick="mych(xxx.jpg)">ってのをやってみて、それなりには動くんですけど、どうしても後学のために配列を使用したかったんです。ittochanさんのスクリプトみたいのをくみたかったんです。遠慮なく使用させてもらいます。勉強にもつかわせてもらいます。 どうもです。