• ベストアンサー

web制作・小窓リンクの技

web制作初心者です。 こちらのサイトの小窓の出し方を教えてください。 http://www.tv-asahi.co.jp/aibou/contents/cast/ 通常の別ウィンドウで、立ち上がるタイプの小窓リンクではなく、 このサイトの様に、小窓のOPEN&CLOSEを滑らかしたいのと、 小窓を任意の場所に移動させる技を知りたいです。 ソースをみてもイマイチよくわかりません。。。 こちらは、Javascriptを使用しているのでしょうか？ また、このようなソースの解説やサンプルを紹介しているサイトがあれば、 教えて頂ければと思います。 よろしくお願い致します。

  • CSS
  • 回答数2
  • ありがとう数5

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

  • ベストアンサー
回答No.2

一言で言うとJavaScriptです。 該当のサイトで使われているのはHighslideですね。 http://highslide.com/ 「highslide」で検索すると、日本語の解説サイトもたくさん見つかると思います。 サンプルなどは配布元や解説サイトで見てください。 同様のライブラリとしてLightWindow、Lightbox、Thickboxなどが有名ですが、 「javascript アルバム」で検索すれば、無名ライブラリもたくさん見つかると思います。 なかにはHTML/XHTMLの文法違反を起こす物もありますので、 使いやすさや文法重視などを考慮する必要があるかもしれません。 個人的には、多少のJavaScriptの知識が必要ですが、必要なスクリプトファイルも少ないHighslideをお勧めします。 JavaScriptが全くわからない、HTMLとHTMLタグ属性だけで作りたい、というのであればThickboxをお勧めします。 こっちのほうが使いやすかった、というのがあれば、それを使うことをお勧めします。

akoblue
質問者

お礼

御礼が遅くなり申し訳ございません。 とても丁寧なご回答ありがとうございます。 教えて頂いた単語で検索し、いろいろ知ることができました。 ありがとうございました。

その他の回答 (1)

回答No.1

多分 AJaxを利用しているのだと思われます。 自分で同じようなことをするのであれば Yahoo! User Interface LibraryのDialogあたりを利用します。 http://developer.yahoo.com/yui/container/dialog/ http://www.tuyudaku.net/javascript/yui-dialog.html

akoblue
質問者

お礼

御礼が遅くなり申し訳ございません。 AJaxでも、このような動きを出せるのですね！ 一つ勉強になりました。ありがとうございました。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

  • 小窓ウィンドウについて

    リンク先をソースに表示せずに小窓ウィンドウを立ち上げるにはどうすればいいのでしょうか？ 何かの関数ですか <script language=JavaScript> document.write(" <a onclick=openi() href="javascript:d()"> よろしくお願いします。

  • 小窓について。

    現在、クリックすると小窓が開くようにして注意事項等を表示しています。 サイト内で小窓が3カ所あり、全てサイズが違います。 私は開いた小窓を閉じて次のアクションをおこすので気付かなかったのですが、 どうやら開いた小窓をそのままで次のアクションをおこし別の小窓を開く人には「見えない」(実際には開いているけれど、元々のページの下に隠れている。＆小窓のサイズが最初に開いた小窓のままで次に開いた小窓の内容とはサイズが合ってない)という事です。 現在使用中のタグは以下のものです。 どのように訂正すれば快適に表示することができるのでしょうか。 ＝HEAD内＝ <script type="text/javascript"> <!-- function subwin1(){window.open('△△.htm','miniwin', 'resizable=no,menubar=no,status=no,location=no,scrollbars=yes,toolbar=no,width=430,height=620');} --> </script> ＝BODY内＝ <A href="javascript:subwin1()"> 過去ログをどのように調べたらいいかわからなかった(適切な検索語句がわからない)ので新しく質問しました。 もし過去に同じような質問があれば、リンクを張っていただくだけでも構いません。 お手数おかけしますが、よろしくお願いします。

    • ベストアンサー
    • HTML
  • JavaScriptで、小窓を開きたいのですが…

    色々やってみましたが、イマイチどうも上手く行かないのです。小窓を開けても、小窓にページの表示が出来なかったり、ちゃんとページが開けてもサイズ指定したのに大きいウィンドウで開いたり…。 HP作成ソフトでサイトを作っている程度の知識しかありませんので、どなたか分かりやすく教えて下さい。 開きたいページは、time-s.htmlで、「ここ」というリンクをクリックして小窓で開かせたいです。 ちなみに現在は、head内に <script type="text/javascript"><!-- function newWin(){ window.open("time-s.html","time","width=196, height=176, scrollbars=no, location=no, menubar=no"); } //--></script> body内に <a href="javascript:void(0);" onClick="window.open('time-s.html', 'time', 'width=300,height=220')">ここ</a> としてあります。 色々張りつけてるうちに、ごっちゃになってしまったみたいです（汗） ご親切な方、よろしくお願いします。

  • こんなHPを制作したいです。

    http://www.osvaldas.info/ この様なホームページを制作したいと思っています。 自分のスキルとしては、HTMLの知識・CSSの知識は多少あります。 学校でActionScriptをちょこっとかじりました。 ソースを見ましたが、このサイトがどうやって構築されているのかが理解できません。 ソースをスタイルシート無しで表示させると３ページに別れているように見えているのがすべて一つのHTMLで書かれている時点で？？？です。 どのような細工をしてあるんでしょうか。自分の出来る範囲ではそれぞれ別のHTMLで制作しリンクを張る程度です。 やはり高度な技を使っているのでしょうか？ それと、ページの切替時の動きはjQueryを使っているであっていますか？ その様なスクリプトの実例を解説してあるサイトがあったらぜひ知りたいです。 よろしくお願いします。

  • Webサイトでリンク先を新しいウインドウで開きたいのですが、上手くでき

    Webサイトでリンク先を新しいウインドウで開きたいのですが、上手くできません。 Xhtml1.0／strictで作っています。 window.open()を使って写真などサイト内のページを別ウインドウで開く事はできるのですが、リンク先のサイトを開く場合の方法を教えて下さい。 javascriptについては殆ど分からないので、サンプルのコピペで対応しています。

  • 小窓をだしてMIDIを流すのですが。

    　自分のホームページでMIDIのコンテンツを作ろうと思ってます。 　で、曲名の後ろの「試聴」のボタン（画像）を押したら、小窓が出てその曲名のMIDIがなるようにしたいのです。 　Ａの曲の試聴ボタンを押せば、小窓はＡのMIDIが鳴り、Ｂの曲の試聴ボタンを押せばＢのMIDIが鳴るという感じです。（小窓は複数出さないです） 　こういうjavascriptは、さがしたらいくつかあったのですが、ここからが問題。私が今までみたものはすべて、小窓は別のHTMLファイルを用意しています。Ａの試聴ボタンを押したら、Ａのmidiを鳴らすためのHTMLファイルへリンクしてるのですよ。もし、１０曲試聴してもらおうとしたら、１０個のHTMLファイルを用意しなくてはいけないわけです。 　私が、欲しいなぁ・・・と思ってるのは、別HTMLファイルを用意せずに、変数か何かを使って、Ａの試聴ボタンを押したら小窓の題名とMIDIがＡ用に入れ替わって、Ｂの試聴ボタンを押したら小窓の題名とMIDIが入れ替わる・・・みたいなのなのですが。（この説明で分かるかなぁ・・・）　コンボボックスならそういうのがあるのは見つけたのですが、画像のクリックでやりたい！と思ってます。いろいろなサイトをまわりましたが、見つかりません。自作しようとも思いましたがまだまだ勉強中の身で、できませんでした。 　このようなjavascriptの作り方を知ってる、又は作り方の出ているサイトを知ってる方いましたら、教えていただけますか？

  • 小窓について

    はじめまして、お教え下さい。 goliveでHP作成してますが リンク先にgif画像の小窓を表示させたいのですが 具体的にはどうすればいいのでしょう？ 色々探したら下記のような表示がありましたが、例えばここにgif画像を差し込んで表示するにはどうすればいいのでしょう？ 何卒よろしくお願い致します。 <A href="javascript:w=window.open('アドレス','','scrollbars=yes,Width=250,Height=100');w.focus();">ポップアップ</A>

  • 小窓の出し方について教えて下さい。(2)

    http://oshiete1.goo.ne.jp/kotaeru.php3?q=568520 先ほどご回答を頂き、小窓の開き方は解決致しました。 ↓ <script type="text/javascript"><!-- function subwin(imgsrc,imgalt){ sub1=window.open("","subwin","width=230,height=160,resizable=1"); sub1.document.open(); sub1.document.write("<html><head><title>"+imgalt+"</title></head>"); sub1.document.write("<body style='margin: 0;'>") sub1.document.write("<img src='"+imgsrc+"' alt='"+imgalt+"'>"); sub1.document.write("</body></html>"); sub1.document.close(); } //--></script> body内の、呼び出し部分は、 <a href="#" onClick="subwin('画像ファイルのURL','画像ファイルの説明'); return false;"><img src="p_1.jpg" border="0" width="70" height="48"></a> が、クリックして開く小窓に表示させるHTMLファイルで開かせたい 画像が同じページにあります。（大きさは横５００縦６００） もう１つ教えて頂いた↓ <script type="text/javascript"><!-- function subwin(file){ window.open(file,"subwin","resizable=1, width=230, height=160"); } //--></script> 以上をhead内に記述して、呼び出し部分は <a href="#" onClick="subwin('読み出すHTMLファイルのURL'); return false;"><img src="p_1.jpg" border="0" width="70" height="48"></a> のwidth=230, height=160をwidth=500, height=600にして上記ソースに加えると（？） 全部の小窓がwidth=500, height=600になってしまいます。 width=230, height=160の画像で開かせる小窓と width=500, height=600のHTMLで開かせたい小窓を 同じページに加えるには、どうしたらよいのでしょうか？ ご回答宜しくお願い致します。

  • Dreamweaverで制作について

    Dreamweaverで制作について サイトを作っていて、コンテンツの中に、ほかのサイトを丸々リンクさせる方法を知りたいのです。 ヘッダー コンテンツ フッター 上記のように、サイトを作っていって、ほかに立ちあがっているサイトをヘッダー以下のコンテンツに入れる方法です よろしくお願いします。

  • javascriptに関して

    オンマウスで画像が大きくなり、そのうえリンクが張れるサンプルのソースを教えてください。 フラッシュなどは使用できずjavascriptで制作しなければなりません。 参考サイトなどもございましたらあわせてご教授下さい。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する