• 締切済み

画像をクリックしたら別ウインドウを開くようにするには?

検索したり本を探したりしたのですが、どうしても見つけられなかったので 投稿します。 アルバムのコンテンツを作ろうと考えています。 いきなり大きな画像を沢山張りつけると重くて仕方がなくなるので、 まずサムネイルをテーブルの中にいれて沢山表示させるページを作りました。 自分の理想としてはサムネイルをクリックすると サイズ指定された別ウインドウが開いて該当サムネイルの大きな画像が 表示されるようにしたいんです。 そこで色々調べてみたのですが、ボタンや、テキストをクリックすると 別ウインドウが開くというサンプルはあっても、画像をクリックした 場合の設定方法が見つかりません。 どのように設定したらいいのか、ご存知の方がいらっしゃいましたら、 教えてください。よろしくお願いします。

  • boop
  • お礼率100% (3/3)

みんなの回答

  • cradoll
  • ベストアンサー率50% (7/14)
回答No.3

<a href="Javascript:tempWin.focus()" onClick="tempWin=window.open('images/sample_big.jpg','sample','width=200,height=200')" border="0"> <img src="images/sample_smoll.jpg" width="50" height="50" border="0"></a> と、こんなのはどうでしょう 画像一枚一枚にスクリプトを記述するのでちょっとソースが長くなりそうですが 改行をいれずに書かないとだめかも知れません

boop
質問者

お礼

どうもありがとうございました! 皆様に教えていただいた情報を参考に 色々やってみたのですがスキルがないせいで うまく設定できず、結局自力で解決してしまいました。 お返事頂きました皆様、お忙しい中回答いただきまして、 本当にありがとうございました!

  • MMPichu
  • ベストアンサー率66% (4/6)
回答No.2

想像されているのと違うかもしれませんが、チョット書いて見ました。 簡単にする為に正式なHTML記述では書いていませんので適当に変更して 下さいね。 新たなウィンドウのイメージを縮小する必要がない場合は、 document.writeを使わずに、window.open(obj.src, .....); でもOKです。 ただし、NetScapeでは動くかどうかは確かめていません。 <html><head> <title>abc</title> <script language="JavaScript"> <!-- function imageOpen(obj,w,h) { var bound = 20; var winInf = "toolbar=no,width=" + (w+bound) + ",height=" + (h+bound) + ",status=no,scroolbars=yes,resize=no,menubar=no"; var imgTag = "<img height=" + h + " width=" + w + " src=" + obj.src + " border=0>"; window.open(null,null,winInf).document.write(imgTag); } //--> </script></head> <body> <img height="64" width="64" src="abc.jpg" border="0" onClick=imageOpen(this,300,300)> </body></html>

boop
質問者

お礼

どうもありがとうございました! ネスケとIE両方でスムーズに動くことを 考えると大変だなぁといつも思います。

  • kokucho81
  • ベストアンサー率61% (157/255)
回答No.1

お望みのものは恐らくこういうものなのでしょう。 <html> <head> <meta http-equiv="content-type" content="text/html;charset=shift_jis"> </head> <script type="text/javascript"> <!-- function open_window(img,x,y){ s="width="+x+",height="+y; win1=window.open('','','resizable=yes,scrollbars=no,'+s); win1.document.open("content-type:text/html"); win1.document.write("<html>\n<body bgcolor='#ffffff' leftmargin='0' topmargin='0' marginwidth='0' marginheight='0'>\n"); win1.document.write("<img src='+img+'>"); win1.document.write("</body>\n</html>"); win1.document.close(); } //--> </script> <body> <table border="4" cellpadding="0" cellspacing="2" width="200"> <tr> <td><a href='javascript:open_window("a_big.gif",300,200)'><img height="32" width="32" src="a.gif" border="0"></a></td> <td><a href='javascript:open_window("b_big.gif",200,320)'><img height="32" width="32" src="b.gif" border="0"></a></td> <td><a href='javascript:open_window("c_big.gif",250,220)'><img height="32" width="32" src="c.gif" border="0"></a></td> </tr> <tr> <td><a href='javascript:open_window("d_big.gif",250,220)'><img height="32" width="32" src="d.gif" border="0"></a></td> <td><a href='javascript:open_window("e_big.gif",250,300)'><img height="32" width="32" src="e.gif" border="0"></a></td> <td><a href='javascript:open_window("f_big.gif",50,450)'><img height="32" width="32" src="f.gif" border="0"></a></td> </tr> <tr> <td><a href='javascript:open_window("g_jpg.gif",300,50)'><img height="32" width="32" src="g.jpg" border="0"></a></td> <td><a href='javascript:open_window("h_jpg.gif",350,330)'><img height="32" width="32" src="h.jpg" border="0"></a></td> <td><a href='javascript:open_window("i_jpg.gif",250,220)'><img height="32" width="32" src="i.jpg" border="0"></a></td> </tr> </table> </body> </html> サルネイムガ像が a.gif b.gif ・・・・・・ i.jpgなどで、 本物画像が a_gif.gif, b_big.gif ・・・・・・ i_big.jpg と考えます。 javascript:open_window("i_jpg.gif",250,220) のところで設定し、 左から、”本物の画像ファイル”、x幅、y幅 です。 いちどソースをコピって動きを確認なさればどう私用すれば良いかわかると思います。

boop
質問者

お礼

ありがとうございました。 早速コピーして動作を確認しましたが、 ウインドウは開きませんでした。 教えていただいたとおりにやってみましたが やはりウインドウは開きません。 多分私のやり方がまずいのだと思います・・・。 もう少し答えを募集してみます。ありがとうございました!

関連するQ&A

  • クリックでテキスト表示

    既出かもしれませんが、教えて下さい。 よく、テーブル内でテキストや画像のサムネイルをクリックすると、 同テーブルの別セルに大きい画像を表示するというのがありますが それを画像ではなくテキストを表示させたいのですが どうやればできるのでしょうか?

  • 画像クリックにて自分自身を別画像に入れ替えるには?

    ホームページを作成中なのですが、メニュー欄をそれぞれ画像にて表示し、画像クリックにて対象ページに飛ぶようにしております。 このたび、選択されたメニューを識別できるように、クリックされた画像を別画像に入れ替えて表示させようとしています。 onMouseOverやonMouseOut時に一時的に画像を入れ替えるロールオーバーのサンプルはよく見かけますが、できればロールオーバー的なものではなく、onClick時に自分自身の画像を入れ替えし、別の画像がクリックされるまで、ずっと入れ替えた画像を表示しておきたいのです。 JavaScript、CSSなど方法は問いません。 なお、テキストエディタにて作成しています。 どなたかよきアドバイスをお願いいたします。 よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • テキストのリンク先を別ウインドウで画像表示

    サムネイル画像のリンク先で別ウィンドウを開くというのは良く見かけるのですが、テキストの文章の一部からリンクさせて小窓で画像を開くというのはどうやったらよいのでしょうか?同一ページ内で複数のリンクを設定(それぞれに別の画像を表示)したいのですが・・・ htmlで書いてblanc指定でリンクするとウィンドウが大きい上にメニューバーが邪魔で困っています。 どうかよろしくお願いします。

  • リンク画像を別ウインドウで開きたい

    gooブログ無料版の”カスタム用テンプレート”を使用しています。 サムネイルをクリックした時に、別ウインドウで拡大画像を表示したいのですが、CSSで記述する事は可能でしょうか。

  • テーブルの<trでウィンドウAを開くのですが、別リンクをクリックすると2枚開く

    テーブルでできたひとつの行があり、その行にJavaScriptのonClickでウィンドウを新しく開き、別のページを開かせるようにしています。 (この行のどこをクリックしてもそのページAが開く) しかし、その行にある、あるひとつの列に、画像をはり、その画像に同じくonClickで別ウィンドウBを開くように設定しました。 私の考えではその列の画像をクリックしたらウィンドウBのみが開き、その列のほかのスペースをクリックしたらウィンドウAが開くようになると思っていたのですが、残念ながら画像をクリックするとAとBが同時に2枚開いてしまいます。 どうにかして、画像をクリックしたらウィンドウBのみが表示されるように出来ないでしょうか。 宜しくお願い致します。

  • 別ウィンドウで大きさを指定&クリックで画像をかえる方法

    自分で撮った画像を小さく並べて、それをクリックしたら別ウィンドウで表示するようにしたいのです。 その時、別ウィンドウの大きさを指定し、クリックで画像が変わるようにしたいのです。色々試してみたのですがどうもうまくいきません。どなたかアドバイスお願いしますm(_ _)m

  • 画像クリックした後別ウィンドウで表示

    過去の質問を調べてみましたが無かったのでご質問させて頂きます。 とあるページに小さい画像が右に並んでいて、左に大きい画像がある ページがあります。 その右側の小さい画像をクリックすると左側の画像が小さい画像の拡大版が 表示されます。 ここまでは過去ログにありましたが、その左側の画像をクリックすると 別ウィンドウでそのクリック後に変わった画像が表示したいのです。 別ウィンドウはhtml表示でなくてもイメージの直表示でOKなのですが 説明足らずでわかりにくい点等ございますが、ご指導頂ければ幸いです。 宜しくお願い致します。

  • Dreamweaverを使用 クリックで新しいウィンドウを開くを作成しましたが、次のを開く時ウィンドウが後ろに行くのを回避したい

    DreamWeaverのビヘイビアを使って新しいウィンドウを開くというのを作ってみました。 目的はカレンダー式にサムネイルとして並べた小画像をクリックしたらウィンドウが開いて大きめの画像が見える。というものを作りたいのです。 ウィンドウを開き、そのウィンドウのサイズ等はDreamweaverのビヘイビアで設定できたのですが、次の小画像をクリックすると前に開いたウィンドウが切り替わるのですが、小画像が載っているクリックしたウィンドウが手前に来るため開いているのがわかりずらくなります。 これを回避したいので 1.次のサムネイルの小画像をクリックしたら開いたウィンドウを手前にまた表示されるようにする。 2.前に開いたウィンドウとは別に新しくウィンドウが開く。 以上ようなスクリプトを設定できたら良いのではと思っています。 私は公開されているスクリプトを埋めこむくらいならできますが、一から作ることはしたことがないです。 上記の1か2以外でもこういうやり方があるよ!というのでも構いません。 運用的にはほぼ毎日カレンダー的に追加していくので、 DreamWeaverで設定と 少しの手直しでいけるようなものであればうれしいです。 ご存知の方ぜひ!教えてください!!!

  • サムネイルクリックで別ウィンドウに拡大画像表示

    javascriptにて画像のようなな形を作りたいのですが初心者で困っています。 ページAの画像をクリックすると別ウィンドウで拡大画像とその他のサムネイルが 表示され、そのウィンドウで各画像を切り替えて観覧できるようにしたいです。 元のページでの画像切替はよくありますが、別ページを開いて観覧する場合がわからず困っています。ページAと同じようなページを複数つくり、拡大のページBは共通で使えるようにしたいと思っています。 ページAのhtml部分は <li><a href=><img src="test.jpg" title="拡大時に表示する文"></a></li> <li><a href=><img src="test_a.jpg" title="拡大時に表示する文"></a></li> <li><a href=><img src="test_b.jpg" title="拡大時に表示する文"></a></li> この画像をクリックでページB拡大画像を表示し、画像と一緒にtitleに入れた文章を表示させたいと思っています。 用意する画像は各拡大画像1枚で、サムネイルのところはcssで小さくしています。 このような形は実現可能でしょうか? よろしくお願いします。

  • サムネイル(画像)をクリックすると別のHPに飛ぶ・・・・

    サムネイル(画像)をクリックすると別のHPに飛ぶようにするにはどうしたらいいでしょうか? ソースください。