• 締切済み

写真を別ウインドウで拡大した後、別の写真を拡大する時に前に開いたウインドウに表示する

現在写真を公開するHPを作成中なのですが、以下のHTML文で複数写真を公開すると、拡大の際にいくつものウインドウが出てしまい、困っています。 <a href="@@@@@.JPG" target="_blank"> <img src="@@@@@.JPG" width=$$% height=$$%> </a> 写真を別ウインドウで拡大した後、別の写真を拡大する時、前に開いたウインドウで表示するにはどのような方法がありますか?

  • HTML
  • 回答数2
  • ありがとう数0

みんなの回答

  • DOUGLAS_
  • ベストアンサー率74% (397/534)
回答No.2

 直接の回答は [回答番号:No.1] の yyr446 さんがお書きですが、 >現在写真を公開するHPを作成中 とのことでしたら、「Litebox」・「Highslide」のような JavaScript を使った表示の仕方もおしゃれかなと存じます。 表示例) ●http://www.doknowevil.net/litebox/  [Image Set Example:]・[Single Image Example] の下の写真をクリックなさってみてください。 ●http://highslide.com/  ページを少しスクロールした [Examples] - [Highslide JS core] にある写真をクリックなさってみてください。 --------------------------------------------------------------------------------  他にも、ページに配置された画像をクリック(onClick)したり、オンマウス(onMouseOver/onMouseOut)すると他のフレームやテーブルのセル内に拡大画像を表示する、というような JavaScript を書くこともできます。 簡単な例)  下記の例は、サムネイル画像のURLに入っている「(サムネイル)」の文字を空白文字列に置換することによって拡大画像のURLを取得し表示します。 <script>  function enlarge() {   document.getElementById("gazou").innerHTML = '<img src="' +   document.getElementById("sumbnail").src.replace("(サムネイル)","") + '" width=200 height=100>';  }  function disappear() {   document.getElementById("gazou").innerHTML="";  } </script> <table>  <tr>   <td>    <img src="@@@@@(サムネイル).JPG" onMouseOver="enlarge()" onMouseOut="disappear()" id="sumbnail"></a>   </td>   </tr>   <tr>    <td>     <span id ="gazou"><span>    </td>  </tr> </table>

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.1

target="_blank"じゃなく同じtargetを使えばいいだけのような? 意図が違います? <a href="@@@@@.JPG" target="gazou"> <img src="@@@@@.JPG" width=$$% height=$$%> </a> <a href="####.JPG" target="gazou"> <img src="####.JPG" width=$$% height=$$%> </a> <a href="$$$$.JPG" target="gazou"> <img src="$$$$.JPG" width=$$% height=$$%> </a>

関連するQ&A

  • 写真集の写真を別窓で大きく表示したいのです

    写真集の写真を別窓で大きく表示したいのですが、 クリックしてもそのままの同サイズでしか別窓で表示されません。 大きく拡大した写真を表示したいのですが このタグでどこがいけないのでしょうか? アドバイスよろしくお願いします!   <tr> <td align="center" valign="middle" width="128" height="128"><A href="s-d11900251.jpg" target="_blank"><IMG src="s-d11900251.jpg" border="0" width="160" height="120"></A></td>

    • ベストアンサー
    • HTML
  • 別ウインドウで、開く

    「別ウインドウで、開く」について、教えてください。 別ウインドウで、jpgを、「自動的」に、この写真の「指定通り」の大きさで開きたいのですが、開くことは開くのですが、大きさは、まちまちに開きます。 「指定通り」の大きさ(472*349)で、開きたいのですが、どこが誤りなのかわからないので、教えてください・・・よろしくです。 <(_ _)> <A href="■.jpg" width="472" height="349" border="0" target=" blank">◆</A>

    • ベストアンサー
    • HTML
  • アメブロで画像が拡大表示できません。

    アメブロで記事を作成して画像を載せましたが、画像をクリックしても拡大表示できません。 人のブログの写真はクリックすると拡大できます。 HTML表示では <a href="http://***.jpg"><img border="0" alt="*" src="http://***.jpg" width="*" height="*" /></a> となっています。 よろしくお願いします。

  • ウインドウを狭めてもレイアウトが崩れない方法

    ウインドウを狭めてもレイアウトが崩れない方法を教えて下さい。 内容は、一番上にタイトルとしての画像を表示させて、その下に画像を3列で何列ものせる。 ウインドウを大きく広げたときは、それらの画像を中央に表示させてレイアウトを崩さないようにする。 下のような感じでは、ウインドウを狭めると画像が勝手に移動してしまいます。 全てを固定にしたいです。 お手本を教えて頂きたいです。よろしくお願いいたします。 添付画像が理想です。 ウインドウを狭めても画像が固定されている瞬間をイメージ化したものです。 <img src="" border="0" width="300" height="60" /> <br> <br> <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a> <a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a> <a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a> <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a> <a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a> <a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a> <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a> <a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a> <a href="" target="_blank"><img src="" alt="" border="0" width="250" height="166" /></a>

    • ベストアンサー
    • HTML
  • フレーム内のリンク先を別ウィンドウに表示する

    お世話になります。 ページ内にフレーム領域を作りました。 フレーム内のリンクをクリックするとフレーム内で別ウィンドウが開きます。 <iframe src="aaaaaa.html"name="bbbbb"width="800"height="500"></iframe> 上の様に書きました。フレーム内のaaaaaa.html内のリンクをクリックするとフレーム内に別ウィンドウが開きます。 そうではなくて、_blankを使った様に別ウィンドウを開きたいのです。 <a href="aaaaaa.html内のURL"target="_blank" <iframe src="aaaaaa.html"name="bbbbb"width="800"height="500"></iframe> </a> <iframe src="aaaaaa.html"name="bbbbb"width="800"height="500"><a href="aaaaaa.html内のURL"target="_blank"</a></iframe> 上記の様にしても結果は同じでした。 RCCの知識が無いために、ページ内にブログのページを強引に表示しました。 よろしくお願いします。

  • HPの画像の拡大表示について  

    現在HPを作成しています。 小さい画像を並べて、クリックすると新しいウインドウに 拡大写真が表示されるようにしたいのですが。 winのペイントで画像を2枚用意して、(縮小画像と拡大画像) 01と1にファイルしました。 <A href="img\1.jpg" target="_blank"><IMG src="img\01.jpgL"></A>  としたのですが、拡大画像は表示されても、縮小画像は×になっています。何か間違っているのでしょうか?  教えてくださいお願いします。 超初心者ですので、わかり易くお願いします。

    • ベストアンサー
    • HTML
  • HP作成 縮小⇒拡大した写真に文を入れたいのですが・・・

    メモ帳でHPを作成しています。 縮小⇒拡大した写真の下に文を入れたいのですが・・・ <A href="img\321.JPG" target="_blank"><IMG src="img\0321.JPG"alt="7月1日"></A> 上記だと写真だけしかないので、説明文も大きい写真の方に入れたいのですが、、、 初心者ですが、よろしくお願いいたします。

  • jQueryで画像にリンクを張りたい

    HTMLページに <img src="1.jpg" width="50" height="50" id="tes"> というタグがあるのですが、 ページが読み込まれたときに、 そのタグにaタグをつけて <a href="hoge.html" target="_blank"><img src="1.jpg" width="50" height="50" id="tes"></a> とリンクを張りたいのですが以下のような スクリプトを書いてみたのですが、 できません。 <script type="text/javascript"> $(function(){ $('<img />').append($('<a />',{ href:"hoge.html", target:"_blank" }) ) }); </script> jQueryがよくわかっていないのでめちゃくちゃなのだと思いますが、 そもそもこのように画像にaタグをつけることは可能なのでしょうか。 jQueryのバージョンは1.2.6を使っていますが、 新しいバージョンでも構いません。 よろしくお願いします。

  • 画像をクリックすると別ウインドウに拡大画像を表示する。

    アパレルのショッピングサイトの運営をしております。クライアントから「自社デザインを真似たものや盗用したものを頻繁に見かけるようになったため右クリック禁止で商品写真の画像をコピーされないようにしたい」との依頼がありました。 右クリック禁止は気休め程度と説明しましたが、残念ながら理解を得られませんでした。 私のJava Scriptの知識は読むことができる程度です。浅薄な知識ではどうにもすることができず、こちらに投稿させていただきました。どうぞよろしくお願いいたします。 実現したい内容は、▼次のとおりです。 ┌─────    │商品画像  │A0101.jpg └───── ↓↓クリックで別ウインドウが開く ┏━━━━━━━━ ┃         ┃ 商品拡大画像  ┃ A0101L.jpg(末尾の'L'はLサイズの意味) ┃ ┃    ×閉じる ┗━━━━━━━━ 1.商品画像をクリック。ファイル名A0101.jpgを変数に記憶。 2.A0101.jpgの末尾に’L'を加える。(A0101L.jpg) 3.別ウインドウを開き、拡大画像を表示。 4.拡大画像の横幅を調べ、別ウインドウを、高さ(600px)、横幅( 拡大画像+左右余白10px)にリサイズ。 5.画像上での右クリック禁止(<IMG SRC="A0101L.jpg" oncontextmenu="alert('画像コピー禁止');return false;">) ▼イメージに近いサイト 「ノードストローム」 (商品画像の下、>LARGE VIEWをクリック) http://store.nordstrom.com/product/product_brandboutique.asp?styleid=2874130&boutique=lacoste&category=2376776~2374325~2378463~2383145~2378114&NextStyleID=2874128&PrevStyleID=none ▼現在はtarget="_blank"で別ウインドウを開かせています。 <A href="picture/A0101L.jpg" target="_blank"><IMG src="picture/A0101.jpg"></A>

  • 初歩的かもしれませんが回り込みが上手くできません

    初歩的かもしれませんが回り込みが上手くできません イメージ的には、図のようなdivを4つ横に並べて改行、同じように繰り返したいです。 ■■■■ ■■■■ しかし、下記の様にすれば ■■■ ■ ■■■ ■ に、なってしまいます。 こういう場合、どうすればいいのでしょうか?? <div class="sample" style=" width:120px; float:left;"><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave1</a></div> <div class="sample" style=" width:120px; float:left;"><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave2</a></div> <div class="sample" style=" width:120px; float:left;"><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave3</a></div> <div class="sample" style=" width:120px; "><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave4</a></div> <div class="sample" style=" width:120px; float:left;"><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave5</a></div> <div class="sample" style=" width:120px; float:left;"><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave6</a></div> <div class="sample" style=" width:120px; float:left;"><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave7</a></div> <div class="sample" style=" width:120px; "><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave8</a></div>

    • ベストアンサー
    • CSS

専門家に質問してみよう