• ベストアンサー

外部ファイルのJava scriptでこんなページを作りたいです。

http://www.m-pattern.com/catalog/goods/no.k0745.html のように、小さい写真をクリックすると右側に大きく表示されるというカタログみたいなページを多数作りたいです。 (子供の写真を載せるので・・・) JavaScriptを外部ファイルにして読み込む方法があるときいたのですが、このようなページも可能でしょうか? 詳しい方がいらっしゃったら、やり方を教えていただきたいです。 よろしくお願いします!

質問者が選んだベストアンサー

  • ベストアンサー
回答No.1

こんばんは。 外部ファイルとは「~.js」になります。 サンプル手順 (1)0.jpg、1.jpg、2.jpgと好きな画像を名前変更 (2)test.jsを作成 『ソース』 function chengeImg(jpg) { document.image.src=jpg; return false; } (3)test.html 『ソース』 <HTML> <HEAD> <script type="text/javascript" src="test.js"></script> </HEAD> <BODY> <TABLE width="234" height="181"> <TBODY> <TR> <TD> <A href="test.html" onclick="return chengeImg('0.JPG');"> <img src="0.JPG" name="image1" width="78" height="91" border="0"/> </A> </TD> <TD> <A href="test.html" onclick="return chengeImg('1.JPG');"> <img src="1.JPG" name="image2" width="78" height="91" border="0"/> </A> </TD> <TD> <A href="test.html" onclick="return chengeImg('2.JPG');"> <img src="2.JPG" name="image3" width="78" height="91" border="0"/> </A> </TD> <TR><TD colspan="3"><img src="0.JPG" name="image" width="234" height="91" border="0"/></TD></TR> </TBODY> </TABLE> </BODY> </HTML> (4)同じフォルダにすべてのファイルを入れてください。 ※ちなみに、ファイル名を変更した場合は、 HTMLファイルのサンプル用の名前が埋め込まれている部分を 任意名に変更してください。

関連するQ&A

  • wordpressの個別ページに外部ファイルを‥

    wordpressの個別ページに外部javascriptファイルを使用して動画を貼り付けたいのですが、いまいち方法がわかりません。Custom CSS and JavaScriptプラグインを有効化して、カスタムフィールドに名前と値(http://~)をいれたのですがブログ記事に動画がつきません。何か別にphpファイルを用意してスクリプトを記述しないといけないのでしょうか? ちなみに貼り付けたいスクリプトはhttp://www.schick-jp.com/tvcmのサイトにあるものです。

    • ベストアンサー
    • PHP
  • HTMLページに外部テキストファイルを取り込むには?

    HTMLのページに、一部だけ外部ファイルのデータを取り込もうとしています。 <HTML> <BODY> <P><TABLE WIDTH="450" > <TR> <TD><IMG SRC="picture1.jpg"></TD> <TD >ここにJavascriptで自由更新文(1)を入れる</TD> </TR> </TABLE><BR> <TABLE WIDTH="450"> <TR> <TD><IMG SRC="picture2" ></TD> <TD>ここにJavascriptで自由更新文(2)を入れる</TD> </TR> </TABLE> </BODY> </HTML> 上のような、写真と説明文がセットになったテーブルがいくつか配置されているページがあるとします。 その説明文を、HTMLを見たこともない人物に自由に更新してもらわねばなりません。 そこで、例えば「1つめの写真の説明文は1.dat、2つめの写真の説明文は2.dat …と、単純にテキストだけを打った.datとか.txtファイルをサーバにアップロードしてもらい、htmlページはJavascriptでその.datファイルをテーブル内に読み込むようにして使いたいのですが、そのJavascriptはどんな書き方をすればよいでしょうか? <script type="text/javascript" src="1.js"></script>といったように読み込む場合、1.jsの内容は単純なテキストでなく document.write("これは例文です。"); // End といったように、ソースになっていなければダメですよね? これでは間違って「"」等を消されたらファイルが壊れてしまいます。このため、こういう内容でなく、「document.write("」や「");」や「// End 」も無い、単純なテキストだけを外部ファイルにすることはできないでしょうか?

  • このようなページを作りたい

    こちらのページのように画像をクリックすると出来るようなページを作りたいのですが、どのようにすればよいのでしょうか。もしかしてJAVASCRIPTじゃない?なんてことも思っているのですが、回答お願いします。 http://www.denkaba.com/gallery_covers.html

  • ページめくりソフト

    クリックにより、カタログをめくり、実際のカタログを見ているようなものを作成したい。また、左or右側に目次が出るように、または右or左側にスライドが出て、そのスライドをクリックするとそのページが開く。そのようなソフトを探しています。

  • 外部JSファイルでポップアップウインドウを開くには?

    ウェブサイト内の複数ページからJavaScriptで「クリックするとサイズを指定したポップアップウィンドウが開く」ようにしています。 (ポップアップウィンドウ内に開くファイルは全て同じです。) しかしこのポップアップウィンドウ、情報量が変わるたびに高さを変更する必要があり、更新がとても煩雑です。 そこで、このJavaScriptを外部ファイルにして、開くウィンドウの高さの変更を、容易にしたいと思っています。 Dreamweaver8を使用していますので、ライブラリを使えば良いのかと思ったのですが、クリックする対象が、ページによってテキストだったり、ボタンだったり、バナーだったりとばらばらなので、無理そうです。 色々なサイトやこのサイトのページも調べてみましたが、どうしてもやり方がわかりません。 どなたか教えていただけませんでしょうか。 現在HTML内に書いてあるJavaScriptは <a href="javascript:;" onclick="MM_openBrWindow('ファイル名.html','','width=750,height=500')">クリックする対象</a> で、height=の数字を頻繁に変える必要があり、大変わずらわしいのです。 どうぞよろしくお願いします。

  • 外部ファイルを指定するとページ上部に空白が

    bodyやcssでマージンは全てにしているのですが、javascript外部ファイルを読み込ませようとして記述を追加すると上部に空白ができてしまいます。 何が原因なのでしょうか? ↓ページのソース(都合によりファイル名は全て仮名ですすいません) <head> <title>サンプルページ</title> <meta http-equiv="Content-Type" content="text/html; charset=euc-jp"> <script type="text/javascript" src="http://test.com/****1.js"></script> <script type="text/javascript" src="http://test.com/****2.js"></script> <link rel="stylesheet" type="text/css" href="http://test.com/****.css"> <style type="text/css"> <!-- body { background-position: 0px 0px} --> </style> </head> <body topmargin="0" leftmargin="0" marginwidth="0" marginheight="0" bgcolor="#FFFFFF" text="#333333"> スクリプトの場所は全て絶対パスで指定しています。 また、charsetがeucなのはこのファイルがphpで記述されているためです。 ****1.jsはページで使うスクリプト全て(ポップアップやロールオーバー等)を記述、****2.jsはアクセス解析用のスクリプトを入れています。後者を追加してから空白が出てきたような気がします。 スクリプトの種類によってこういうことが起きるのでしょうか? ご回答お願い致します。

  • 外部Javascript

    javascriptを外部ファイルに記述してXHTMLファイルで読み込む方法でWEBページを作成しています。あるページ内に作成したボタンをクリックすると新しいウィンドウが表示され、その新しいウィンドウ内に作成したボタンをクリックするとその新しいウィンドウが閉じるというスクリプトを組み込みたいのですが外部ファイルとXHTMLそれぞれの記述方法を教えてください! ちなみにページ内に作成したボタンをクリックし新しいウィンドウを表示し、その元のウィンドウ内に作成したボタンから新しいウィンドウが閉じるというスクリプトはできました。どうしても新しく表示したウィンドウ内に作成したボタンからウィンドウを閉じることができません! 詳しい方本当におねがいします。

  • 外部に用意したHTMLファイルを他のHTMLのページに読み込みたいので

    外部に用意したHTMLファイルを他のHTMLのページに読み込みたいのですが… いろいろ調べてみたんですが、prototype.jsで読み込む方法を見つけました。 URL http://sevenstyleweb.com/blog/2008/05/prototypejshtml.html ただこの場合、読み込む元のhtmlファイルに<head>タグや<body>などが含まれている場合はそれも全て読み込む先に反映されてしまうのでしょうか? 読み込む元のファイルの任意の部分だけ(ID指定した<div>のみなど)を指定する事はできないのでしょうか?その方法があれば教えて下さい。 またprototype.jsでなくても、他のAjaxやjavascriptの方法があれば教えて下さい。お願いします。

  • HPのページが表示されにくいのは?

    Dreamweaverで編集されたHPで、”News""Works""Link"等のバナーがあるのですがkそれぞれをクリックしてそのページに行こうとするとページが表示される前に、ページを構成する線だけが出てきて、写真が出て来るなど、最初に変な表示のされ方をします。 以前はそんなことはなかったのですが、どこがおかしいのでしょうか。ご存知の方よろしくお願いします(m m) K2329

  • 外部プレーヤーのJavascriptとは?

    「FC2動画で削除された動画を見る方法」 http://zatsukin.blog.fc2.com/blog-entry-11.html こちらで、赤字の部分を外部プレーヤーのJavascriptの青字部分に入れて試してみる。 <\script src="http://static.fc2.com/video/js/outerplayer.min.js" url="http://video.fc2.com/ja/content/動画のID/" tl="動画のタイトル" sj="25000" d="897" w="448" h="368" charset="UTF-8"><\/script> というアドバイスが中ページほどにありますが、肝心の外部プレイヤーとは何処のことを 言っているのでしょうか?外部プレーヤーのJavascriptとはどうやって表示させるのでしょうか? 実際動画を見れるようになるまでの手順を教えてください。