- ベストアンサー
ホームページの写真表示について
IE6.0を使用しています。 ホームページの作成で 写真を<img src=***.jpg>で表示すると、 大きい画像の場合、縮小表示され、矢印で原寸大にするようになっています。 しかし、この縮小表示の輪郭が汚いので、最初から原寸大表示にしたいのですが、する方法はありますか。 （別に写真表示用htmlファイルを作ればできますが、写真直リンクでできるかどうか知りたいです。）
- noro6857
- お礼率88% (526/596)
- Windows XP
- 回答数7
- ありがとう数5
- みんなの回答 （7）
- 専門家の回答
質問者が選んだベストアンサー
>最初のhtmlファイルになにか策をたてられるかどうかがわかるとありがたいのですが。 １つのhtmlだけで表示させようとするには、元の写真「***A.jpg」の情報（***Aと縦横サイズ）を受け渡さないと無理ですね。 受け渡すにはやはりJavaScriptを使わないと無理です。 また、ブラウザとWindowsの制約から、はじめから原寸は無理で、最大閲覧者のディスプレイのサイズ（1024x765とか1280x1024）止まりで、それ以上のサイズの写真はディスプレイサイズに縮小表示され「○にプラスのマーク」を表示します。クリックするとスクロールバー付き原寸表示になります。 この方法を書いておきます。 元のhtmlファイルで </head>の直前に以下のJavascriptのプログラムをおいて(貼り付けて)ください。 ---ここから--- <script language="JavaScript"><!-- var pname;function img_sc(nam){pname=nam;myphoto=new Image();myphoto.src=nam+".jpg";} function win_op(){if(myphoto.complete){x=myphoto.width+20;y=myphoto.height+30;window.open(myphoto.src,pname,"menubar=no,scrollbars=yes,resizable=no,width="+x+",height="+y);}} //--></script> ---ここまで--- <body>以降の本文中に写真ごとに以下のように書いてください。ただし、「***An.jpg」の拡大写真を「***Bn.jpg」とします。(n=1～200枚） 写真1枚目： <br> <a href="javascript:void(0);" onmouseover="img_sc('***B1');" onclick="win_op();" title="拡大表示"> <img src="***A1.jpg"></a><br> 写真2枚目： <br> <a href="javascript:void(0);" onmouseover="img_sc('***B2');" onclick="win_op();" title="拡大表示"> <img src="***A2.jpg"></a><br> 以下この繰り返しです。 拡大画像用htmlファイルは自動的に開きますので、htmlファイルは作成する必要はありません。 以上試してみてください。
その他の回答 (6)
- info22
- ベストアンサー率55% (2225/4034)
画像をhtmlファイルと同じディレクトリに置く方法で上手く表示されているとのことですが、それでよろしいですか？ Windowsではデスクトップのサイズより大きなウインドウズは開けない制約やブラウザの制約のため現状で良しとせざる得ないと思います。 なお、こちらで下記の2つ●の場合について実際にサンプルを作ってうまく動作することを確認して回答していますのでどちらでも上手くいくはずです。 ●画像をhtmlファイルの下の「img/」に置いて大きい画像と小さい画像の名前の前に「img/」をつけた場合も ●画像をhtmlファイルと同じフォルダ（ディレクトリ）に置いて大きい画像と小さい画像の名前の前に「img/」をつけない場合 >画像ファイルをimgにいれずにhtmlファイルと同じフォルダにして、記述からimg/をはずしてみたらうまく表示されました。 どちらのケースでも動作確認済みです。 >別フォルダにいれるとうまくゆかないのかもしれませんね。 別フォルダでも動作確認済みです。おかしいですね。 タグや「"」が１つでも過不足のミスがあると、表示画面に、htmlの中の記述は無効になったり、表示画面に出てしまうことが起きます。 >なおscript内のjpgは大文字、小文字関係なく表示できました。 これはMicrosoftの「MS DOS」やそれを引き継いだ「Windows OS」のいい加減なところです。http://www.xxx..../ の記述文字も大文字、小文字を区別していませんね。 UNIXのように大文字、小文字を区別しているとはっきり区別できます。 >最初両方にimg/6039…としたのですが、画像をクリックしたときに下の方に <１>三角のはてなマークとjavascript:void(0) が出てしまったため、 >大きい方はjava記述の仕組みかと思ってはずしました。 <２>はずすとはてなマークが消えたものですから。 <３>もう一度imgをいれてみましたが、しかし大きい画像はどうしても表示できません。 <1>この辺りに貼り付けミスがある可能性が高いです。 貼り付ける範囲の不足か または 貼り付ける前の文字列が残ってしまった。 貼り付ける場合や変更する場合の 「<」と「>」のタグの数の過不足 「"文字列"」の「"」の過不足 が原因しているようです。大文字、小文字の使い分けがいい加減の割りに、タグや「"」の数の過不足は1つだけでも致命的な影響を与えますね。
お礼
テストまでしていただいて恐縮です。 何回かチェックしているんですが、おかしいですね… やはりimgの中に画像は納めたいのでなんとかうまくゆきたいです。 実際にUPしてあるurlをご紹介します。 http://sr777.com/photo2004/050326fusae/index.html の6039の部分です。 画像の拡張子は本文にあわせて小文字にしました。 クリックすると一瞬「エラー」となり、はてなマークが出たままです。 IE6.0 OSはXpHomeを使用しています。
- info22
- ベストアンサー率55% (2225/4034)
No.4は削除してください。 サーバが混んでいたせいかNo.5の一部が分割されUPされてしまいました。
- info22
- ベストアンサー率55% (2225/4034)
>ふと気がついたことは画像のファイルNoが順列でないといけないのかなと思いました。 小さい画像Aと大きい画像Bが対応していて、それがn=200組あるということだけです。要は小さい画像をクリックしたとき、それに対して大きい画像が表示されるという関係だけです。番号は説明のためだけですから、実際の画像ファイルの名前の番号とは関係がありません。 ●うまくいかない原因 HTMLファイルのあるフォルダ（ディレクトリ）の下の「img/」に小さい画像と大きい画像が置かれているため、以下のように、両方とも前に「img/」をつければ、うまくいきます。 <a href="javascript:void(0);" onmouseover="img_sc('img/IMGP6039');" onclick="win_op();" title="拡大表示"> <img src="img/IMGP6039s.JPG"></a><br>
お礼
たびたびすみません。 最初両方にimg/6039…としたのですが、 画像をクリックしたときに下の方に 三角のはてなマークとjavascript:void(0) が出てしまったため、大きい方はjava記述の仕組みかと思ってはずしました。はずすとはてなマークが消えたものですから。 もう一度imgをいれてみましたが、 しかし大きい画像はどうしても表示できません。 headの中に書く scriptの中に「jpg」と書かれている部分があるので、ファイルの拡張子が大文字のため、ここも大文字にしてみたのですが、小文字、大文字とも変化なかったです。 scriptはペーストしているためスペルミスは発生してないと思います。 あと、まだできてはいませんが、小画像表示の輪郭を消すためにborder=0を記述してしまってもいいですよね？
補足
画像ファイルをimgにいれずにhtmlファイルと同じフォルダにして、記述からimg/をはずしてみたらうまく表示されました。 別フォルダにいれるとうまくゆかないのかもしれませんね。 なおscript内のjpgは大文字、小文字関係なく表示できました。
- info22
- ベストアンサー率55% (2225/4034)
HTMLファイルのあるフォルダ（ディレクトリ）の下の「img/」に小さい画像と大きい画像が置かれているため、以下のように、両方とも前に「img/」をつければ、うまくいきます。 <a href="javascript:void(0);" onmouseover="img_sc('img/IMGP6039');" onclick="win_op();" title="拡大表示"> <img src="img/IMGP6039s.JPG"></a><br>
- info22
- ベストアンサー率55% (2225/4034)
><A href="***B.jpg"><img src=***A.jpg></A> とした場合で***.A.jpgは実サイズ表示サイズともは320×240とし、***B.jpgは実サイズ3200×2400にした場合そのまま表示したいのです。 特別な技術を使わないで、最も簡単には 元のHTMLファイルで <A href="***B.html"><img src=***A.jpg></A> としておき 拡大画像用htmlファイル「***B.html」を作り その中に <IMG src="***B.jpg" width="3200" height="2400" border="0"> とすればいいかと思います。 これではだめですか？ （そうでないとJavascriptなどを使って同様な操作をすることになるかと思います。）
お礼
ありがとうございます。 最初の質問にも書いてあるように表示用htmlで作ることは知っているのですが、写真のみにリンクさせて、最初のhtmlファイルになにか策をたてられるかどうかがわかるとありがたいのですが。 （写真がたくさんあり(200枚近く）それをひとつずつhtmlファイルを作るのがめんどうなため）
- info22
- ベストアンサー率55% (2225/4034)
>写真を<img src=***.jpg>で表示すると 原寸が640x320の場合、以下のように書けば、最初から原寸で表示されませんか？ <IMG src="***.jpg" width="640" height="320" border="0"> 結果をお知らせください。
お礼
ありがとうございます。 質問の記述を間違えました。 <A href="***.jpg">写真</A> とした場合、このクリック先の写真表示を最初から原寸大にしたいのです。 ふつうは縮小表示され、拡大矢印記号が出てそれにより拡大するようになっていると思います。
補足
下記文でもう少し正確に書きます。 <A href="***B.jpg"><img src=***A.jpg></A> とした場合で***.A.jpgは実サイズ表示サイズともは320×240とし、***B.jpgは実サイズ3200×2400にした場合そのまま表示したいのです。（当然画面からはあふれますが）
お礼
大変丁寧な回答をいただき感謝します。 さっそく試させていただきました。 ふと気がついたことは画像のファイルNoが順列でないといけないのかなと思いました。 当該ファイルの内容を更に説明しますと、 フレームを使用し、左側にメニュー相当のサムネイル画像を並べてあります。 そしてそれをクリックすることで右側主画面のhtmlファイルが表示されます。（画像枚数分のhtmlファイル） そのhtmlファイルの内容は次のとおりです。 <TABLE BORDER="0" WIDTH="640"> <TR> <TD WIDTH="30%" ALIGN="LEFT"><A HREF="IMGP6025.html"><< 前の画像</A></TD> <TD WIDTH="40%" ALIGN="CENTER"><img src=fusae1.gif></TD> <TD WIDTH="30%" ALIGN="RIGHT"><A HREF="IMGP6044.html">次の画像 >></A></TD> </TR> </TABLE> </P> <!-● <A HREF="img/IMGP6039.JPG" target="_blank"> <IMG SRC="img/IMGP6039s.JPG" BORDER="0" HEIGHT="450" ALT="IMGP6039.JPG"> </A> --●> ここで表示画像(6039s.JPG)(320×450)をクリックすると、別の大画像6039.JPG(960×1350)が表示されるのですが、その画像が最初は小さいためダイレクトに原寸大で表示する方法を模索中なのです。 ご覧のように画像は次の画像のNoは順列ではありません。 とりあえずご指示いただいた。 headの中にscriptを記述し、 <!-● から --●> を <a href="javascript:void(0);" onmouseover="img_sc('IMGP6039');" onclick="win_op();" title="拡大表示"> <img src="img/IMGP6039s.JPG"></a><br> と置き換えてみたのですが…。 記述が正しくないのかうまくゆきませんでした。