質問

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

通報する

回答 (4件)

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」

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

ではでは。

この回答へのお礼

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

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

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

最近は、JavaScriptをブロックするような動きがあります。
ワクチンソフトも、初期設定で、JavaSvcriptを起動させないような物が、多くなっています。

JavaScriptを使用するのであれば、サイトのTOPページにでも「JavaScriptを使用しています」と乗せておいた方がいいかもしれませんね。

この回答へのお礼

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

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ってやつではないんですよね?例えば「バス」をクリック→別ウインドウでバスの画像、ってな具合にしたいんです。回答を応用してやろうと思いましたが、別のやり方?っぽいですね?時間があるときでいいんで答えて頂けたら幸いです。

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

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

この回答へのお礼

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

このQ&Aは役に立ちましたか?0 件

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

新しく質問する

注目の記事

フリーアナウンサー長谷川豊氏の新コーナー「このニュースどう思います?」がスタート!

元フジテレビのフリーアナウンサー長谷川豊氏から気になるニュースについておしトピの皆さんに質問します! 皆さんの意見をもとに長谷川豊氏がコラムを執筆します! アプリリリース記念として最大1万分のアマゾンギフト券プレゼントキャンペーンも実施中!

このQ&Aを見た人が検索しているワード


新しく質問する

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

毎日見よう!教えて!gooトゥディ

べんりQ&A特集