- ベストアンサー
小さい画像をクリックして大きい画像を別窓で表示させる方法
ＨＰ作成ソフト（ホームページＮｉｎｊａ＋Ｅコマース）を使ってＨＰを使っています。サーバーはＺＡＱです。アップロードはソフトのＦＴＰ転送機能を使っています。現在ＨＰで品物を売っています。それで商品ページ（画像や商品名・値段を記入しているページ）の画像をクリックすると別窓で大きな画像を表示できるようにしたいのですが多分ソフト自体にはそのような機能（ＨＰビルダーのサムネイル機能のようなもの）がついていないと思います。 マイドキュメントにある自分のＨＰファイル⇒表示⇒ソースでＨＴＭＬを開いて「小さな画像」（リンク）「大きな画像」という感じのタグを加えて上書き保存してもＨＰには反映されません。 それで、フリーソフトのffftpをダウンロードして転送してみたのですが それではアップロード自体が上手くいかないのでそのソフト自体を削除して 上の作成ソフトでもう一度ＨＰを作り直しました。 ネットや本などで調べても分からなかったのでこちらで質問させて頂きました。 ちなみに、ＨＰ作成ソフトで挿入している画像はMy Docummentの中にありますし 大きな画像も同じファイルに入っています。
- yonkiti
- お礼率74% (26/35)
- その他（インターネット・Webサービス）
- 回答数5
- ありがとう数4
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
最初に、画像は2つ用意します。（小さい画像と大きい画像） <a href="大きい画像のURL"><img src="小さい画像のURL"></a> とすれば可能です。 別窓にするのであれば、 <a>タグ内で、targetを指定すればOK。 例えば、 <a href="one_l.jpg" target="new"><img src="one_s.jpg" width="50" height="50" border="0"></a> といった具合。 targetで指定したnewは、開いたウィンドウにつけられる名前で、 他のリンクからも同じようにnewを指定しておくと、同じウィンドウで表示されるので、むやみにウィンドウを増やすことなく便利です。 全て新しいウィンドウというのであれば、 target="_blank" と指定します。
その他の回答 (4)
- the845s
- ベストアンサー率34% (61/176)
画像ファイル名が変なんですが？？？ 画像ファイルは通常拡張子を必要とします。 JPEG画像であれば、「.jpg」GIF画像であれば「.gif」というように、 また、このファイル名には、日本語や「.」はを使わない方がいいです。 ですので、大きな画像と小さな画像は区別する為に、（JPEG画像であれば、） suma00001.jpgを大きな画像とすると、小さな画像には、suma00001_s.jpgとした方が良いと思います。 また、リンクは http:// じゃなく、相対パスでの記入で構いません。 それは前述の通り、 <a href="20020527/suma00001.jpg"><img src="suma00001_s.jpg"></a> とすれば、OKかと思います。
お礼
お礼が遅くなり 丁寧にご回答頂いたのに 本当にごめんなさい<(_ _)> 自分でも試行錯誤しながら やってみると出来ましたヾ(＠^▽^＠)ノ ありがとうございました。
- the845s
- ベストアンサー率34% (61/176)
整理できないので、最初から説明します。 基本的に、ホームページを作成する際は、専用のフォルダを作成することをオススメします。 これは、FTP等でのアップロードの際簡単になる為です。 そして、画像は画像で、この専用フォルダ以下に置くのが良いと思います。 WEB（ホームページ用フォルダ） ┠img（画像用フォルダ） ┃┠ one_l.jpg（大きな画像） ┃┗ one_s.jpg（小さい画像） ┗index.html というような位置関係にしておくと、便利ですね。 さて、画像は、大きな画像と、それをリサイズし小さくした画像の二つ必要になります。 タグに関しては前述の通り、 もし、タグ記入の際、「ビルダーが立ち上がった状態で、メモ帳で編集した・・・」というのであれば、それは反映されません。 ビルダーを終了させた後、メモ帳で修正し、再度ビルダーで開いて見てください。 また、このtargetに関しても、<A>タグのオプションとしてあると思います。
お礼
ご丁寧な回答ありがとうございます。 WEB（ホームページ用フォルダ） ┠img（画像用フォルダ） ┃┠ one_l.jpg（大きな画像） ┃┗ one_s.jpg（小さい画像） ┗index.html ↑なんですが・・・。 私の場合は WEB（ホームページ用フォルダ）⇒マイドキュメント内にあるHOMEPAGENinja EC という名前のフォルダ内にある⇒セレクトリサイクルというフォルダ名です ┠img（画像用フォルダ）⇒セレクトリサイクルフォルダ内のＨＴＭＬフォルダ内 の20020527という名前のフォルダです ┃┠ one_l.jpg（大きな画像）⇒画像名はsuma00001 ┃┗ one_s.jpg（小さい画像）⇒画像名はsuma00001.01 ┗index.html 以上のようになっています。 それで今日作成ソフトを調べてみると商品ページに挿入した画像に別ウィンドウで リンクを貼る事が出来るらしいんです。 それで、上記の画像フォルダ（20020527）ごとサーバーには転送していますので この方法でリンクを貼ろうと考えるとリンク先のＵＲＬ（http://～）は どうなるか分かりますか？分かる範囲で結構ですので教えてください。 この方法で画像に大きな画像のリンクが貼れるのであれば、かなり簡単に（タグを入力しなくても）私がしたいことが出来ますので・・・。 宜しくお願いします。
- novaakira
- ベストアンサー率36% (60/164)
そのような作成ソフトは使用していませんが・・・・ ＰＣでMy Documentに画像を保存し、作成ソフトでその画像を呼び込んでも、 アップロードしたときにＰＣ内と同じようなディレクトリを作成しな ければ画像は表示されません。 あと、画像のＵＲＬがC:\\～やC://、またはfile～ などで始まってませんか？それだとアップロードしたときに画像は 表示されません。 画像が入っているフォルダをjとして、大きい画像をpic1_1.jpg 小さい画像をpic1_0.jpgと考えて・・・ ディレクトリは以下のようになっているとします。 +― +―a.htm ←写真を載せてるページ | +―j ←画像が入ってるフォルダ | +pic1_0.jpg +pic1_1.jpg とすれと、the845sさんが書かれたとおり、 <a href="j/pic1_1.jpg"><img src="j/pic1_0.jpg" border="0"></a> とすれば画像が表示されます。別の画面で大きい画像を表示 したいのならtarget指定を書いてあげればＯＫです。 (画像の大きさもthe845sさんが書いたとおりです。) 仮に、テーブルを使って整えたいときは・・・・ <table border="1"> <tr> <td><a href="j/pic1_1.jpg"><img src="j/pic01_0.jpg" border="0"></a></td> <td><a href="j/pic2_1.jpg"><img src="j/pic2_0.jpg" border="0"></a></td> <td><a href="j/pic3_1.jpg"><img src="j/pic3_0.jpg" border="0"></a></td> </tr> <tr> <td width="180" align="middle">pic1のコメント</td> <td width="180" align="middle">pic2のコメント</td> <td width="180" align="middle">pic3のコメント</td> </tr> </table> とすれば表示されます。一度ためしてみてください。
お礼
回答ありがとうございました。 丁寧に書いていただき、早速試してみたいと思います。
- KIMV
- ベストアンサー率15% (82/544)
フレーム分割をすれば・・・ トップの頁で <html> <head> <title>見出し</title> </head> <frameset rows="200,*" bordercolor="#5588BB" border="YES"> <frame src="./???.html" name="ue"> <frame src="./???.jpeg" name="sita"> </frameset> </html> 上記で 上下２分割の頁が出来ます。 後 ???.html より target="sita" で下に出る画面をよりリンクできます。 左右の場合は <frameset cols= ・・・・・・・・ で可能
お礼
回答ありがとうございました。 せっかく回答いただいたのですが・・書かれてある意味が 分からない状態です。申し訳ないです。
補足
the845sさん、回答ありがとうございます。 補足ですが、質問に書いたようにするタグは分かっているのですが それを (1)作成ソフトorメモ帳で編集して「転送（公開）」する方法 (2)大きい画像のＵＲＬ が分かりません。 普通ＵＲＬは画像につけた名前と拡張子だと思うのですが ＨＰがあるフォルダと画像があるフォルダ（ファイルかも？） が違う場合フォルダやファイル名も画像名前の前につけますよね？ こういう状態でメモ帳でＨＴＭＬタグ編集して上書き保存をしても ＰＣ内で反映できないのです。 上手くかけないのですが・・回答お願いします。