- 締切済み
1つのhtmlファイルで複数のページの役割を
例えば画像ファイルが10個（a.jpg, b.jpg, ～ i.jpg, j.jpg）あったとして、これらを1枚1枚表示するとしたら例えば <a href="a.htm">a.jpg</a> <a href="b.htm">b.jpg</a> ・ ・ ・ <a href="i.htm">i.jpg</a> <a href="j.htm">j.jpg</a> みたいな感じでそれぞれhtmlファイルを用意すればいいのでしょうけど、 これを1つのhtmlファイル z.htmだけで <a href="z.htm">a.jpg</a> <a href="z.htm">b.jpg</a> ・ ・ ・ <a href="z.htm">i.jpg</a> <a href="z.htm">j.jpg</a> 上の状態だとすべて同じ内容のz.htmに飛ぶだけですが、 a.jpgをクリックするとz.htmはa.jpgが、 b.jpgをクリックするとz.htmにはb.jpgのみが表示されている・・・。 みたいな感じで見せることはできるでしょうか？ javaスクリプトとかで解決できるでしょうか？ 分かりづらい質問かもしれませんが、よろしくお願いします。
- nekojiro
- お礼率78% (39/50)
- HTML
- 回答数3
- ありがとう数0
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- tripod_r
- ベストアンサー率38% (5/13)
私はJAVAが分からないもので..... PHPではいかがでしょうか！？ (PHPが使えない環境ならすみません.....) <a href=photo.php?img=a>a.jpg</a> <a href=photo.php?img=b>b.jpg</a> <a href=photo.php?img=c>c.jpg</a> photo.php <? print <<<END <html> <body> <img src="$_GET[img].jpg"> </body> </html> END; ?> な、感じです。 PHPが使える環境なら試してみて下さい。
- grace2973
- ベストアンサー率66% (16/24)
こんな感じでいかかでしょうか。 --- 元html --- <a href="z.htm?a.jpg">a.jpg</a> <a href="z.htm?b.jpg">b.jpg</a> ： --- z.htm --- <html> <haed> <script langage="JavaScript"> <!-- function loadImg() { frm.img.src = location.search.substring(1); } //--> </script> </head> <body onLoad="JavaScript:loadImg();"> <form name="frm"> <img name="img" src=""> </form> </body> </html> ＜解説＞ 元htmから、パラメータで表示したい画像ファイル名を渡す。 受け取ったhtm (z.htm) のロード時に パラメータを取得してイメージを表示する。 location.search は、 "?"以降の文字列を取得するので substring(1) で、2文字目以降の文字列にする。 （"?"だけ切り取る） どうでしょうか。
- k_misaki
- ベストアンサー率36% (17/47)
ひとつのhtmlで、いろいろな画像をひとつずつ表示できるスライドのような機能、ということでよろしいですか？ ako's cyberpage http://myako.net/ という場所で、JavaScriptを配布しています。そのメニューの中から「スライド関連」というのを探してみると便利です。
- 参考URL：
- http://myako.net/
関連するQ&A
- 複数の外部ファイルの読み込み
外部ファイルを複数読み込もうとしても、なぜか、上手くいきません。 ジャバスクリプトを一つだけにすると正常になり、二つにすると、どれか一つだけになってしまいます。 例えばＡのスクリプトが上手くいけば、Ｂが正常に動かなくなったりと言った感じです。 スクリプトはそれぞれ、違ったものになってます。 原因がよくわかりませんが、何が悪いんでしょうか？
- ベストアンサー
- JavaScript
- 複数のウインドウを表示したい
ホームページを作っていますが、ページ上に複数の画像があり画像をクリックすると別ウィンドウで画像を表示するようにしたいのですが、今のプログラムでは最初に表示し、次をクリックしても画像が切り替わりません。どうしたらよいのでしょうか？ちなみに今は <script language="JavaScript"> <!-- function openWin(url) { return false; } // --> </script> <script language="JavaScript1.1"> <!-- var w = window; function openWin(url) { if ((w == window) || w.closed) { w = open(url, "_blank", "width=400,height=319"); } else { w.focus(); } return(false); } // --> </script> <a href="##.htm" onClick="return openWin('##.htm')"> <img src="##.jpg" width="60" height="12" border="0"></a> ##はファイル名 といった様になっています。
- 締切済み
- JavaScript
- 複数の要素へ appendchild できません
以下のような html があり、それぞれの画像リンクの後ろに <span>文章4</span>を追加したいのですが、できません。 元の html <ol> <li>文章1 <a href="a.jpg" ><img src="a_small.jpg" /></a></li> <li>文章2 <a href="b.jpg"><img src="b_small.jpg" /></a></li> </ol> <p>文章3 <a href="c.jpg"><img src="c_small.jpg" /></a></p> 作りたい html <ol> <li>文章1 <a href="a.jpg" ><img src="a_small.jpg" /></a><span>文章4</span></li> <li>文章2 <a href="b.jpg"><img src="b_small.jpg" /></a><span>文章4</span></li> </ol> <p>文章3 <a href="c.jpg"><img src="c_small.jpg" /></a><span>文章4</span></p> 以下のようなスクリプトを書いてみたのですが、どうしても最後の要素（この場合は3番目の画像）へしか <span>文章4</span> が追加されません。全ての a タグの要素へ追加するにはどうしたらいいのでしょうか。 window.onload = function() { var addedSpan = document.createElement("span"); var addedTxt = document.createTextNode("文章4"); addedSpan.appendChild(addedTxt); var imgs = document.getElementsByTagName ("a"); for (var i=0; i<imgs.length; i++) { imgs[i].appendChild (addedSpan); } } 初歩的な質問でお恥ずかしいのですが、是非ご教授ください。どうぞよろしくお願いします。
- ベストアンサー
- JavaScript
- 一ページに複数の小窓を設置したい。
こんにちは。検索もしましたがどうしてもわからないので教えてください。 ＨＰビルダーで一ページに複数の同サイズの小窓を表示させたいのです。 小窓は一つだけで、クリックした時は必ず前に来るようにしたいのです（常に前に出てきて欲しいわけではありません） 今はこのように設置しています。 <head>～</head> <script language="JavaScript"> <!--HPB_SCRIPT_CODE_40 function _HpbJumpURLinNewWindow(url) { if (url != '') { window.open(url, 'aaa',"width=650,height=700"); } } //--> </script> <BODY>～</BODY> <a onclick="_HpbJumpURLinNewWindow('△△.html');" href="javascript:void(0)"><img src="○○○.jpg" ></a> 同じウィンドウに表示できるようになりましたが、二つ目をクリックすると親ページの後ろに回ってしまいます。 解消する方法あるのでしょうか。 わかりにくい説明で申し訳ありませんがよろしくお願いいたします。
- ベストアンサー
- JavaScript
- １ページ内での複数外部ファイル参照はできますか？
こんにちは。 [a.html]と[b.html]というページ内の上部で共通する部分があるので、外部ファイルを読み込んで表示させる方法をとっています。 ここにもう一箇所、共通する部分を表示させたくて、同じ方法でファイルを読み出すようにしたのですが、最初の外部ファイルが二箇所に出力されるようになってしまいました。 よいアドバイスをお願いします。 参考) [a.html]&[b.html]の表示させたいところに下記を記述 <script language="JavaScript" src="*.js"></script> <script type="text/javascript"> <!-- document.write( menutext ) --> </script> ★*.jsは下記の二種類 1 [x.js] menutext ="" +"ひとつめ。" 2 [y.js] menutext ="" +"ふたつめ。"
- ベストアンサー
- JavaScript
- 【AS3.0】画像をクリックして外部複数ファイルの読み出しと削除を行う方法
AS3.0初心者です。 恐れ入りますが、教えていただきたいことがあります。 【開発環境：WinXP FlashCS4】 『 ・a_btnボタンをクリックすると、外部1フォルダの中の複数イメージファイル（jpg）が同時に表示される。 ・b_btnボタンをクリックすると、外部2フォルダの中の複数イメージファイルが同時に表示される 但し、他のフォルダの画像が出ている時は、前表示されていた画像は削除される 』 というものを制作しております。 a_btnをクリックすると、外部フォルダが同時に表示されるところまでは作れたのですが、b_btnをクリックした時に、a_btnをクリックした時に出てきた画像を削除して、新たに画像を表示させるというところでつまづいております。 現在のスクリプト↓ ------------------------------------------------------------ var loader:Loader=new Loader(); a_btn.addEventListener(MouseEvent.CLICK,xClick); //配列の設定 var song01:Array = ["1/e01.jpg","1/e02.jpg","1/e03.jpg","1/e04.jpg"]; var loaderList:Array = new Array(); //iの初期値 var i:int = 0; //spaceの設定 var space:Number =50; function xClick(evt:MouseEvent):void{ for(var i:int=0; i < song01.length;i++){ loaderList[i] = new Loader(); var urlReq:URLRequest= new URLRequest(song01[i]); addChild(loaderList[i]); loaderList[i].load(new URLRequest(song01[i])); loaderList[i].y = space * i+ 250; trace(song01[i]); } } ---------------------------------------------------------- 最終的にはXMLからファイルを読み出して、読み出したファイルをクリックすると音データが再生されるものを作成しようと思っております。 書籍などを見ても、うまく応用できず…恐れ入りますがヒントだけでもいただけると大変助かります。よろしくお願いできませんでしょうか？
- ベストアンサー
- Flash
- ページ内に複数のJQueryスライドを設置したいが
JQuery勉強中の初心者です。１ページ内に同じタイプのスライドショーを４つ設置しようとしていますが、上手く表示されません。 使用しているのは、Galleriaのクラッシックデーマ（下記URLと同一のもの）です。 http://galleria.io/themes/classic/ これをJQueryでオーバーレイさせ、オーバーレイ表示上にGalleriaのスライドを設置しています。 ページ内にはギャラリーを表示するための４つの画像ボタンがあり、そのボタンをクリックすると、オーバーレイ表示上にそれぞれ違うスライドを表示します。 下記のソースのような記述をしています（文字数の関係で、下記ソースの画像ボタンは２つにしています。）。 しかし、<div id="btn1">～</div>をクリックすると、 オーバーレイ表示上にギャラリーが表示されることはされるのですが、５秒後ぐらいに ギャラリー画面上に 「Fatal error: Could not extract a stage height from the CSS. Traced height: 0px.」 と表示されます。 どうしてもこのスライドショーを使用したいので、お盆休み中に格闘しましたが、 どなたか分かる方がおられましたら、解決方法をお教えいただけないでしょうか。 何卒よろしくお願いします。 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet" id="camera-css" href="../common/css/galleria.classic.css" media="all"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js?ver=1.8.3"></script> <script src="../common/js/galleria-1.2.9.min.js"></script> <script> /* オーバーレイ表示用のcss */ <style type="text/css"> #btn1,#btn2 { display:block; width: 420px; height: 281px; cursor: pointer; } #overlay1,#overlay2 { display: none; width: 100%; height:100%; position: fixed; top: 0; z-index: 100; background: rgba(0,0,0,0.8); } #close1,#close2 { width: 80px; cursor: pointer; position:absolute; top:50px; right:0; } </style> </head> <body> <div id="overlay1"> /* オーバーレイ用のボックス */ <div id="galleria"> /* １つ目のスライドショー用のボックス */ <a href="../common/img/photo/t1.jpg"><img src="../common/img/photo/thumb/t1.jpg",data-big="../common/img/photo/t1.jpg"></a> <a href="../common/img/photo/t2.jpg"><img src="../common/img/photo/thumb/t2.jpg",data-big="../common/img/photo/t2.jpg"></a> <a href="../common/img/photo/t3.jpg"><img src="../common/img/photo/thumb/t3.jpg",data-big="../common/img/photo/t3.jpg"></a> </div><!-- #galleria --> <p id="close1"><img src="../common/img/photograph/slide/close.png" alt="close"></p> </div><!-- #overlay1 --> <div id="overlay2"> /* オーバーレイ用のボックス */ <div id="galleria1"> /* ２つ目のスライドショー用のボックス */ <a href="../common/img/photo/s1.jpg"><img src="../common/img/photo/thumb/s1.jpg",data-big="../common/img/photo/s1.jpg"></a> <a href="../common/img/photo/s2.jpg"><img src="../common/img/photo/thumb/s2.jpg",data-big="../common/img/photo/s2.jpg"></a> <a href="../common/img/photo/s3.jpg"><img src="../common/img/photo/thumb/s3.jpg",data-big="../common/img/photo/s3.jpg"></a> </div><!-- #galleria --> <p id="close2"><img src="../common/img/photograph/slide/close.png" alt="close"></p> </div><!-- #overlay2 --> /* オーバーレイ用と、オーバーレイ表示を閉じるボタン用のスクリプト */ <script type="text/javascript"> $(function() { $("#btn1").click(function() { $("#overlay1").fadeIn(); }); $("#btn2").click(function() { $("#overlay2").fadeIn(); }); $("#close1").click(function() { $("#overlay1").fadeOut(); }); $("#close2").click(function() { $("#overlay2").fadeOut(); }); }); </script> /* ギャラリーをオーバーレイ表示するためのボタン */ <div id="container" class="clearfix"> <div id="btn1"><img src="../common/img/photograph/no1_tbt.jpg" alt="" class="item"></div> <div id="btn2"><img src="../common/img/photograph/no2_bali.jpg" alt="" class="item"></div> </div> /* ギャラリー用オプション＆JQuery呼び出し用 */ <script> // Load the classic theme Galleria.loadTheme('../common/js/galleria.classic.min.js'); option = { width: 900, // 幅 height: 600, // 高さ imageCrop: false, // 画像のクロップ有無 // true：width/heightにフィットさせるように画像を切り取って表示 // false：画像を全体表示させるように縮小 transition: 'fade', // 画像の遷移イフェクト _toggleInfo: false, // imgのalt属性を取得してキャプションとして表示 // true：キャプションの非表示 // false：キャプションの表示 } // Initialize Galleria Galleria.run('#galleria',option); Galleria.run('#galleria1',option); /* ←idを分けてみたりしました。 */ </script>
- 締切済み
- JavaScript
- 順番号をつけたhtmlファイルのページ推移
順番号をつけたhtmlファイルへページ推移させたいんですが、現在のファイルの番号を取得して次ページ（++）と前ページ（--）へ数値を代入する方法がわかりません。また、最小値と最大数に達したときにindex.htmlに移動するようにしたいです。 未熟な上、書いてみましたが、動きやしません… ［次ページへ］ <SCRIPT LANGUAGE="JavaScript"> function.next;{ document.links[sample(i).html]; for (i=0; i<最大値; i++); } </SCRIPT> <a href="javascript:next">次へ</a> ［前ページへ］ <SCRIPT LANGUAGE="JavaScript"> function.next;{ document.links[sample(i).html]; for (i=0; i>0; i--); } <a href="javascript:back">戻る</a> </SCRIPT> 「もし、最大値と最小値に達したとき、index.htmlに移動する」 はわかりませんでした。 ご教授いただければ幸いです。
- ベストアンサー
- JavaScript
- イメージマップで作成したリンク先をクリックすると、残りの複数フレームにそれぞれ別のリンク先を表示させるには？
ホームページビルダー6にて作成しています。 この前、画像をクリックした場合の方法を教えていただきました。↓ <img src="xxx.jpg" onclick="parent.b.location.href='a.htm';parent.c.location.href='b.htm';"> これを画像ではなく、 イメージマップで作成したリンク先をクリックすることによって、 複数フレームにそれぞれ別のリンク先を表示させる方法はありますか？ ご教授お願いいたします<(_ _)>
- ベストアンサー
- HTML
- 複数のウィンドウを開く方法
javascriptが良くわかりません。 以下のソースで、レシピAをクリックすると別ウィンドウ（picture_a.html）、Bをクリックすると別ウィンドウ（picture_b.htmlというように設定したいのですが、レシピAをクリックしても、レシピBをクリックしても（picture_a.html）しか表示されません。 どこの記述が間違っているか、ご存知の方教えてください。 ---------------- <script language="JavaScript"> <!-- function MM_openBrWindow(theURL,winName,features) { //v2.0 window.open(theURL,winName,features); } //--> </script> ---------------- <body> <a href="picture_a.html" onClick="MM_openBrWindow('picture_a.html','picture_a,'scrollbars=yes, width=500,height=500');return false;"> <p><img src="img/recipe_a.jpg" alt="レシピA" border="0"><br> <br> レシピA</p> </a> <a href="picture_b.html" onClick="MM_openBrWindow('picture_b.html','picture_b,'scrollbars=yes, width=500,height=500');return false;"> <p><img src="img/recipe_a.jpg" alt="レシピB" border="0"><br> <br>レシピB</p></a> </body> ---------------
- 締切済み
- ネットトラブル
