htmlで写真を拡大表示して閉じる方法

このQ&Aのポイント
  • ホームページ作成ソフトを持っていない場合でも、エディターを使って自分のホームページを作成することができます。
  • 写真を縮小表示しておき、クリックするとその写真が拡大表示されるようにする方法もあります。
  • 拡大表示された写真は、上部に表示され、閉じるボタンをクリックすることで元の画面に戻ることができます。
回答を見る
  • ベストアンサー

htmlで[close]ボタンで拡大表示した写真を閉じるには

ホームページ作成ソフトは持っていません、エディターで「しこしこ」自分のささやかなホームページを作っています。 今は次のような文で横2列、縦10行で20枚の写真を縮小表示して、その写真をクリックすると拡大表示されるようにしています。 その拡大表示は別画面になって表示され、左上の「戻る」か「BackSpace」を押すと元の縮小表示している画面に戻ります。 <tr> <td nowrap align="center"> <a href="images/FW090327.JPG"> <img src="images/FW090327.JPG" border="0" width="350" alt="カタツムリのたまご"></a><br> <FONT size="+1"><b>カタツムリのたまご<br>2009/3</FONT></b></td> <td nowrap align="center"> <a href="images/FW090502.JPG"> <img src="images/FW090502.JPG" border="0" width="350" alt="ミニチュアタイプのカタツムリ"></a><br> <FONT size="+1"><b>ミニチュアタイプのカタツムリ<br>2009/5</FONT></b></td> </tr> 拡大写真を別画面に表示するのでなく、良くホームページで見かけるような今の画面の上に拡大表示され、[close]でその写真を閉じるような感じです。 縮小表示している写真をクリックすることにより、縮小表示している画面の上にその写真が拡大表示され、その拡大表示された写真の右下に[close]ボタンが表示され、[close]ボタンで拡大表示された写真を閉じることができ、縮小表示されている画面になるようにしたいのです。 htmlについては極初心者です、なにか良い方法がありましたら教えていただきたいのです、よろしくお願いいたします。

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

  • ベストアンサー
  • utakataXEX
  • ベストアンサー率69% (711/1018)
回答No.1

おそらく、以下の質問にあるような事をやりたいのだと思います。 http://oshiete1.goo.ne.jp/qa4900688.html 上記の質問の回答にあるとおり、Lightbox2と言うJavaScriptのライブラリを使用する必要があります。 HTMLだけでは実現できません。

FUSENYOU
質問者

お礼

Lightbox2とJavaScriptとライブラリを手がかりにして色々調べて見ました。 ウィンドウのサイズを変更できるようにしたポップアップウィンドウを開くというJavaScriptのfunction function win_open2(wIMG,wName,wWidth,wHeight) にたどり着きました。 初めてトライする時に、さがすのに必要なキーワードを教えていただくのがいかに大切かを痛感しました。 ありがとうございました。

関連するQ&A

  • HTMLについて

    HTML初心者です。いろいろ調べながら下記の画像のテンプレートを作っているのですが、1枠と2枠の頭が揃いません。わかる方教えてください。画像が見づらいかもしれませんが宜しくお願い致します。 <html> <body> <br><center> <font size="6" color="#00000"> <b>タイトル</b> </font> <hr> <br><br> <table width="800" height="500" cellpadding="15" cellspacing="10" BORDER="4" bgcolor="F3F30E"> <tr> <td width="50%" rowspan="4" BGCOLOR="F2F276" ALIGN="left" VALIGN="top"> <font color="#00000" size="4"><b><u> 1 </u></b></font> <br><br> <font size="3" color="#00000"> </font> </td> </tr> <tr> <td width="50%" bgcolor="F2F276" ALIGN="left" VALIGN="top"> <font color="#00000" size="4"><b><u> 2 </b></u></font> <br><br> <font size="3" color="#00000"> </font> </td> </tr> <tr> <td width="50%" bgcolor="F2F276" ALIGN="left" VALIGN="top"> <font color="#00000" size="4"><b><u> 3 </b></u></font> <br><br> <font size="3" color="#00000"> </font> </td </tr> <tr> <td width="50%" bgcolor="F2F276" ALIGN="left" VALIGN="top"> <font color="#00000" size="4"><b><u> 4 </b></u></font> <br><br> <font size="3" color="#00000"> <b></b> </font> </td> </tr> </table> </body> </html>

    • ベストアンサー
    • HTML
  • 携帯サイトでカレンダーをテーブル表示すると1行になってしまう

    携帯サイトでカレンダーをテーブル表示させようと以下のソースを書きましたが、auのエミュレーター(Openwave SDK6.2k)で確認すると、カレンダーがただの縦一行の文字列になって表示されてしまいます。 これはauのエミュレーターがおかしいのでしょうか?、エミュレーターのソース表示をさせてもおかしな解釈をしているわけでもありません。なお、Docomoの実機(903)では問題なく表示されます。 <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd"> <html><head> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=Shift-JIS" /> <title></title> </head> <body> <font size="2"> <div align="center"> <table cols="7" border="0" width="*"> <tr> <td colspan="7" nowrap="nowrap"> <center> <a href=""><img src="prem.jpg"/></a> 2007年7月 <a href=""><img src="nextm.jpg"/></a> </center> </td> </tr> <tr> <td align="center" width="*" nowrap="nowrap"><font color="red">S</font></td> <td align="center" width="*" nowrap="nowrap">M</td> <td align="center" width="*" nowrap="nowrap">T</td> <td align="center" width="*" nowrap="nowrap">W</td> <td align="center" width="*" nowrap="nowrap">T</td> <td align="center" width="*" nowrap="nowrap">F</td> <td align="center" width="*" nowrap="nowrap"><font color="blue">S</font></td> </tr> <tr> <td align="center" nowrap="nowrap">1</td> <td align="center" nowrap="nowrap">2</td> <td align="center" nowrap="nowrap"><font color="red">3</font></td> <td align="center" nowrap="nowrap"><font color="red">4</font></td> <td align="center" nowrap="nowrap">5</td> <td align="center" nowrap="nowrap">6</td> <td align="center" nowrap="nowrap">7</td> </tr> <!--8~21日まで中略--> <tr> <td align="center" nowrap="nowrap">22</td> <td align="center" nowrap="nowrap">23</td> <td align="center" nowrap="nowrap"><font color="red">24</font></td> <td align="center" nowrap="nowrap">25</td> <td align="center" nowrap="nowrap">26</td> <td align="center" nowrap="nowrap">27</td> <td align="center" nowrap="nowrap">28</td> </tr> <tr> <td align="center" nowrap="nowrap">29</td> <td align="center" nowrap="nowrap">30</td> <td align="center" nowrap="nowrap"><font color="red">31</font></td> <td align="center" nowrap="nowrap"></td> <td align="center" nowrap="nowrap"></td> <td align="center" nowrap="nowrap"></td> <td align="center" nowrap="nowrap"></td> </tr> </table> </div> </font> </body> </html>

    • ベストアンサー
    • HTML
  • 縦書き文字をIE7で縮小拡大するとズレる

    お世話になります。 縦書き表示の画面をIE7で開き、Ctrl+マウスホイールで拡大や縮小表示にすると、ある特定の文字のみ位置がズレてしまう現象が起きています。 ズレないようにはできないものでしょうか。 よろしくお願いします。 以下、サンプルソース。 ---------------------------------------------------------- <html> <head><title>縦書きテスト</title></head> <body> <table border="1"> <tr> <td nowrap><div style="writing-mode: tb-rl">企画</div></td> <td nowrap><div style="writing-mode: tb-rl">編集</div></td> <td nowrap><div style="writing-mode: tb-rl">あ、い、う</div></td> </tr> </table> </body> </html>

    • ベストアンサー
    • HTML
  • HTML CSS 表示画像のサイズ

    表示画像のサイズについて。元の画像サイズはばらばらです。 初歩的な質問ですがよろしくお願いします。 <tr> <td><img src="images/A.jpg" width="100" height="100" border="2"></td> <td>コメント</td> </tr> <tr> <td><img src="images/B.jpg" width="100" height="100" border="2"></td> <td>コメント</td> </tr> <tr> <td><img src="images/C焼.jpg" width="100" height="100" border="2"></td> <td>コメント</td> </tr> これをCSSで書く場合なのですが、 img{   width:100 height:100 border:2 } としたのですが、うまくいきません。なぜでしょうか?

    • ベストアンサー
    • HTML
  • ブラウザに合わせた写真の拡大・縮小について

    色々試してみたのですが、どうしても解決できないので知恵をお貸し頂ければ幸いです。 http://oshiete1.goo.ne.jp/qa2479358.htmlのように、インスタンス"mcM"だけがブラ ウザに合わせて拡大・縮小されるようにしたいのですが、現在途中まで作ったのが、ペー ジ上部にあるサムネイルをクリックしたとき、外部jpgを空mc"photo"に読み込む形のもの でして、この空mc"photo"を"mcM"に見立ててスクリプトを当てはめてみたのですが思う ように拡大されず、読み込んだ写真が90°ずれて表示されたり、縦横の比率がおかしくなっ たりして表示されます。 外部jpgでの読み込みにこだわっているわけではなく、単純に色々なサイズ(縦長・横長・ 正方形)の写真をブラウザの中央へ配置して、ウィンドウの大きさが変わったら拡大写真 の部分だけ縮小できればよいのですが、何か良い方法がありませんでしょうか? 分りずらい説明で申し訳ありません。補足説明も致しますのでよろしくお願い致します。

    • ベストアンサー
    • Flash
  • 入力したHTMLがちゃんと表示されるか確認したい

    以下のように入力したHTMLをちゃんとブラウザで表示されるか確認したいのですが、どうすれば良いのでしょうか?(下の入力内容は気にしないでください) -------------------------------------------------------------------------------------------------- <table align="center" style="border-spacing: 0px;width:100%;"><tr><td><div id="EBdescription"> <!-- Begin Description --><table border="6" bordercolor="#72799E" cellspacing="0" cellPadding="10" width="70%" align="center"> <!-タイトル+写真 ここから--> <tr><td> <center> <font size="6" face="Tunga" color="#122276"> <b>◆FANTA GRAPE◆</b> </font> </center> </td></tr> <tr><td><br> <center> <font face="Arial">

    • ベストアンサー
    • HTML
  • HPの画像の拡大表示について  

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

    • ベストアンサー
    • HTML
  • 別フレームにJPG画像をhtmlページ無しでセンターに表示する方法

    宜しく御願いします。 ページをフレームで縦切り2分割にして、左フレームの画像をクリックすると 右フレームに、画像が大きく表示されるホームページを作っていますが、 右フレームに表示される画像が左上寄りになります。 右フレームに表示される画像を、htmlページを用いて表示すれば センターに出来ることは判っているのですが、JPG画像のみの表示で センターにする方法はあるのでしょうか。 左フレームのソースは以下のような物です。 ******************************* <TABLE width="204"> <TR> <TD nowrap><A href="a.jpg" target="sub"><IMG src="as.jpg" height="100" width="75"></A></TD> <TD nowrap></TD></TR> <TR> <TD nowrap></TD> <TD nowrap><A href="s.jpg" target="sub"><IMG src="ss.jpg" height="75" width="100"></A></TD></TR> <TR> ******************************** 以下省略 ご存じの方、宜しく御願い致します。

    • ベストアンサー
    • HTML
  • 写真集の写真を別窓で大きく表示したいのです

    写真集の写真を別窓で大きく表示したいのですが、 クリックしてもそのままの同サイズでしか別窓で表示されません。 大きく拡大した写真を表示したいのですが このタグでどこがいけないのでしょうか? アドバイスよろしくお願いします!   <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
  • HTMLについて教えて下さい。

    上のブルーのラインを削除したいのですが、どこを削除すれば良いか教えて下さい。 <center><table width=640 bgcolor=#ffffff cellspacing=1 cellpadding=5><tr><td bgcolor=#ACE6FF colspan=2 align=center><b></td></tr><tr><td bgcolor=#ffffff colspan=2 align=center><font size=2 color=#777777></font></td></tr></table><br><a href="http://myauc.jp/user/gakuensalon?t=%83o%83X%83%7D%83b%83g" target=_blank><img src=http://image.auctions.yahoo.co.jp/banner.gif border=0><br><font size=2><BR>この他にも出品しておりますので宜しければご覧ください。</font></a><br><br></center>

専門家に質問してみよう