ホームページで別ウィンドウの表示のさせかた。

質問

お世話になります。
初めてホームページを作ってるんですが、例えば
http://fox-one.hp.infoseek.co.jp/limousine/lap.htm
に載っている、バスの写真を別ウインドで表示さすやりかたを教えて頂きたいんです。
元の写真は撮ったんですが、どうしていいもんやら・・・
色々調べたのですが、名前が分からないので困ってます。
ソフトはホームページビルダーです。
ヨロシクお願いいたします。

回答No.4

noname#25230 · ベストアンサー

No.3の方のおっしゃることもそのとおりです。実際、「誰でも見られる」と「思い通りに見せる」はなかなか両立できません。実際には、見る人のさまざまな環境に合わせられるように、なるべく一般的なもので作るべき、ということは忘れないようにしてくださいね。

ただ、技術的な興味を満たすという観点と、制限がなければどこまでできるの？ということは知っておいて損はないと思いますので、いろいろ調べてみてください。

ところで、#2で頂いたコメントに、文字列で同様のことをやりたいとかかれてましたが、こちらの環境でやってみたところ、できましたよ。たとえば、そのHTMLファイルがあるのと同じディレクトリ(フォルダ)に「test.jpg」という画像があるとすると、

------------------------------------
<SCRIPT language=JavaScript><!---
function wopen1(WO){
NewWin=window.open("","chara","width=680,height=520,scrollbars=1");
NewWin.parent.location.href=WO;
k=NewWin;
k.focus();
}
//---></SCRIPT>

<a href="javascript:wopen1('./test.jpg')">テスト</a>
------------------------------------

というような内容のHTMLファイルを作って置けば、表示されました（自分のPCをWebサーバーにして実験）。

このJava Scriptの場合、括弧の中に画像のファイル名を指定するようになっています。そのファイル名の指定がきちんとなされていれば表示されるはずです。
気をつけないといけないのが、画像の指定には「絶対パス」と「相対パス」があるということですね。
絶対パスは、その画像の所在をフルネームで書く方式。相対は、「今いる場所からたどって、どこにあるか」を書く方式です。ホームページビルダーなどを使えばそのあたりは自然にやってくれると思いますが、HTMLを直接編集するときは、気をつけないといけません。

この場合、「今いる場所」とは、そのHTMLファイルがある場所を指します。なので、

・同じフォルダにある画像(test.jpg)
　→「test.jpg」または「./test.jpg」

・ひとつ前のフォルダにある画像
　→「../test.jpg」

・二つ前のフォルダにある画像
　→「../../test.jpt」

・一つ前の「sample」フォルダにある画像
　→「../sample/test.jpg」

というように、ピリオドとスラッシュで位置を指定しながらファイルの所在を指定する必要があります。詳しくは、上の例からパターンを理解してもらうか、そういう本を何か読まれるなどして勉強してください（ご存知でしたらすみません）。

ではでは。

お礼

どうもありがとうございます。
なんとかできました。
「絶対パス」と「相対パス」って本に書いてました。
なんのこっちゃ？って感じですが（笑）
解決してよかったです。
何度もすいませんでした。
他の回答者の方もありがとうございました。

回答No.3

akira212

別Ｗｉｎｄｏｗに表示させるだけなら。
<a href="URL" target="_blank"></a>
の、ターゲット指定でいいのではないでしょうか？

そのＵＲＬのように、「ウィンドウの大きさを指定したい」「うえにでるはずの、ツールバーをけしたい」「でてくる、ウィンドウの画面位置も設定したい」とかであれば、ＪａｖａＳｃｒｉｐｔでしなければなりませんが。
そういった細かいことは、やらなくてもいいのなら、ターゲット指定だけで十分だと思います。

最近は、ＪａｖａＳｃｒｉｐｔをブロックするような動きがあります。
ワクチンソフトも、初期設定で、ＪａｖａＳｖｃｒｉｐｔを起動させないような物が、多くなっています。

ＪａｖａＳｃｒｉｐｔを使用するのであれば、サイトのＴＯＰページにでも「ＪａｖａＳｃｒｉｐｔを使用しています」と乗せておいた方がいいかもしれませんね。

お礼

そうです、別に表示させたいだけなんです。
なんとかできました。
ありがとうございました。

回答No.2

noname#25230

Webページのよいところは、その裏側も(通常は)公開されているということです。ブラウザから、HTMLソースを見てみましょう。InternetExplorerなら、「表示」→「ソース」というメニューを選べば、そのWebページのHTMLファイルの中身を見ることができます。
人が作ったページの裏側を見るというのは、勉強にもなりますし、新しい方法を知るよい手だてにもなります（そっくりデザインまで真似てはいけませんが、手法、というのは学ぶことができますよね）。

提示されたページを見てみると、画像がクリックされたときに、Java Script（ジャバスクリプト）という言語で書かれた簡単なプログラムを呼んでいます。
このプログラムは、同じWebページHTML内の上の方、「<SCRIPTS>」というタグで囲まれたところに書いてあります。
このやりかただと、画像がクリックされると、ブラウザは「あ、JAVAスクリプトを呼ぶんだな」と判断し、HTMLの中にあるJAVAスクリプトプログラムを動かして画像を表示させます。

実際、画像の部分は、

<a href="javascript:wopen1('../jpg/lm620c.JPG')"><img src="../jpg/lm620c.JPG" width="120" height="90" border="0"></a>

とかかれてますね。通常だと

<img src="../jpg/lm620c.JPG" width="120" height="90" border="0">

と書くとその部分に画像が貼られますが、このページの場合、その画像自体にリンクを設けるために、「<a href...>」と「</a>」で画像を囲み、そのリンク先として、「wopen1」というJava Scriptを起動するように指示してあります。

では、このwopen1はどこ？というわけで再度HTMLの中を見てみると、先頭のほうに

<SCRIPT language=JavaScript><!---
function wopen1(WO){
NewWin=window.open("","chara","width=680,height=520,scrollbars=1");
NewWin.parent.location.href=WO;
k=NewWin;
k.focus();
}
//---></SCRIPT>

という記述がありますね。これが小さなJava Scriptのプログラムコードです。画像リンクがクリックされると、この小さいプログラムに画像の所在が伝わり、このプログラムは、新しいウィンドウを開いて画像を表示します。

とりあえずは、このコードを拝借して、同じ動きをすることを確認してみましょう。次は、Java Scriptのプログラムをちょっと書き換えてみて、ウィンドウサイズを変えてみたり、改造してみましょう。

そうすれば、徐々にあなただけのページに仕上がっていきます。

お礼

分かりやすい回答ありがとうございます。
一度挑戦してみたいと思います。
すいません、実は文字をクリックして画像のリンクをさせたいのですが、これはJava Scriptってやつではないんですよね？例えば「バス」をクリック→別ウインドウでバスの画像、ってな具合にしたいんです。回答を応用してやろうと思いましたが、別のやり方？っぽいですね？時間があるときでいいんで答えて頂けたら幸いです。

回答No.1

Quattro99

そのページではjavascriptを使っているようです。ホームページビルダーの説明書やヘルプでJavascriptを調べてみてください。

見本となるページがあるような場合は、そのページのソースを見るといいと思います（Internet Explorerなら、「表示」→「ソース」）。
また、Internet Explorerの「表示」→「ステータスバー」にチェックを入れてステータスバーを表示させ（ウインドウの一番下）、ご質問にあるページの写真のところにマウスポインタを持っていったときにステータスバーになんと表示されるかを見るのもヒントになると思います。

お礼

これがjavascriptってやつなんですね。
勉強になります。
ありがとうございました。