小さい画像をクリックして大きい画像を別窓で表示させる方法

Question

ＨＰ作成ソフト（ホームページＮｉｎｊａ＋Ｅコマース）を使ってＨＰを使っています。サーバーはＺＡＱです。アップロードはソフトのＦＴＰ転送機能を使っています。現在ＨＰで品物を売っています。それで商品ページ（画像や商品名・値段を記入しているページ）の画像をクリックすると別窓で大きな画像を表示できるようにしたいのですが多分ソフト自体にはそのような機能（ＨＰビルダーのサムネイル機能のようなもの）がついていないと思います。

マイドキュメントにある自分のＨＰファイル⇒表示⇒ソースでＨＴＭＬを開いて「小さな画像」（リンク）「大きな画像」という感じのタグを加えて上書き保存してもＨＰには反映されません。
それで、フリーソフトのffftpをダウンロードして転送してみたのですが
それではアップロード自体が上手くいかないのでそのソフト自体を削除して
上の作成ソフトでもう一度ＨＰを作り直しました。

ネットや本などで調べても分からなかったのでこちらで質問させて頂きました。
ちなみに、ＨＰ作成ソフトで挿入している画像はMy Docummentの中にありますし
大きな画像も同じファイルに入っています。

the845s · Accepted Answer

最初に、画像は2つ用意します。（小さい画像と大きい画像）

とすれば可能です。別窓にするのであれば、タグ内で、targetを指定すればOK。例えば、

といった具合。 targetで指定したnewは、開いたウィンドウにつけられる名前で、他のリンクからも同じようにnewを指定しておくと、同じウィンドウで表示されるので、むやみにウィンドウを増やすことなく便利です。全て新しいウィンドウというのであれば、 target="_blank"　と指定します。

the845s · Answer

画像ファイル名が変なんですが？？？画像ファイルは通常拡張子を必要とします。 JPEG画像であれば、「.jpg」GIF画像であれば「.gif」というように、また、このファイル名には、日本語や「.」はを使わない方がいいです。ですので、大きな画像と小さな画像は区別する為に、（JPEG画像であれば、） suma00001.jpgを大きな画像とすると、小さな画像には、suma00001_s.jpgとした方が良いと思います。また、リンクは　http://　じゃなく、相対パスでの記入で構いません。それは前述の通り、

とすれば、OKかと思います。

the845s · Answer

整理できないので、最初から説明します。
基本的に、ホームページを作成する際は、専用のフォルダを作成することをオススメします。
これは、FTP等でのアップロードの際簡単になる為です。
そして、画像は画像で、この専用フォルダ以下に置くのが良いと思います。
　WEB（ホームページ用フォルダ）
　┠img（画像用フォルダ）
　┃┠ one_l.jpg（大きな画像）
　┃┗ one_s.jpg（小さい画像）
　┗index.html

というような位置関係にしておくと、便利ですね。

さて、画像は、大きな画像と、それをリサイズし小さくした画像の二つ必要になります。
タグに関しては前述の通り、


もし、タグ記入の際、「ビルダーが立ち上がった状態で、メモ帳で編集した・・・」というのであれば、それは反映されません。
ビルダーを終了させた後、メモ帳で修正し、再度ビルダーで開いて見てください。

また、このtargetに関しても、<A>タグのオプションとしてあると思います。

novaakira · Answer

そのような作成ソフトは使用していませんが・・・・ＰＣでMy Documentに画像を保存し、作成ソフトでその画像を呼び込んでも、アップロードしたときにＰＣ内と同じようなディレクトリを作成しなければ画像は表示されません。あと、画像のＵＲＬがC:\～やC://、またはfile～などで始まってませんか？それだとアップロードしたときに画像は表示されません。画像が入っているフォルダをjとして、大きい画像をpic1_1.jpg 小さい画像をpic1_0.jpgと考えて・・・ディレクトリは以下のようになっているとします。 +― 　+―a.htm　　　←写真を載せてるページ　| 　+―j　　　←画像が入ってるフォルダ　　| 　　+pic1_0.jpg 　　+pic1_1.jpg とすれと、the845sさんが書かれたとおり、

とすれば画像が表示されます。別の画面で大きい画像を表示したいのならtarget指定を書いてあげればＯＫです。 (画像の大きさもthe845sさんが書いたとおりです。) 仮に、テーブルを使って整えたいときは・・・・


pic1のコメント	pic2のコメント	pic3のコメント

とすれば表示されます。一度ためしてみてください。

KIMV · Answer

フレーム分割をすれば・・・トップの頁で見出し上記で　上下２分割の頁が出来ます。後　???.html　より　target="sita"　で下に出る画面をよりリンクできます。左右の場合は　

小さい画像をクリックして大きい画像を別窓で表示させる方法

画像ファイル名が変なんですが？？？

整理できないので、最初から説明します。

そのような作成ソフトは使用していませんが・・・・

フレーム分割をすれば・・・

最初に、画像は2つ用意します。

この回答への補足

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング