ホームページ作成(javascriptのソースの書き方)について質問です。

ホームページ内にあるテキストにマウスのカーソルを合せと、隣にある画像枠に画像が表示されるようにしたいのですが、javascriptの知識がなく、どのようなソースコードを加えれば良いかわかりません。ご存知の方がいらっしゃいましたら、ご教示ください。(なるべくな具体的ソースの方が助かります=<head>に書くソースコード、<body>に書くソースコード)

※参考になるホームページ
http://www.ikuei-group.com/ikuei/tsuen.html

↑このページにある「課外教室について」の項の箇所にあるように横にテキストがいくつか並んでおり隣に画像枠があって、それぞれのテキストにカーソルを合せるごとに画像を表示させるようにしたいと思っています。

※画像にオンマウスすると画像が変わるソースがありますが、そうではなくてテキストにオンマウスすることで画像を入れ替えたいと思っています。)
※このページのソースから学べばいいのですが、どうやってもうまく行かないので質問しました。

回答の条件
  • 1人10回まで
  • 登録:2007/02/02 12:21:13
  • 終了:2007/02/04 17:12:08

ベストアンサー

id:kn1967 No.3

kn1967回答回数2915ベストアンサー獲得回数3012007/02/02 14:07:37

ポイント50pt

><body>タグ内に書くのでしょうか?


■scriptファイルの指定はhead内で指定します。

■テキストはbody内です。

■スクリプトは別のファイル(http://www.ikuei-group.com/ikuei/script.js)の中から抜き出しました。


探すのも1つの学習ですから「探しやすいように該当する部分を丸写し」しておいたのですがHTMLを直で操作ということではなくて、ビルダーで改造中ということだったのですね。


ビルダーのバージョンが判らないので概要だけになりますがHTMLを直で触らずとも以下のような作業手順で実現できるはずです。


作業手順

(1)最初に表示されている画像を配置して属性にて名前(今回は仮にpicとします)を付けておきます。

(2)テキストをドラッグで選択しておいて右クリックでイベントの設定、イベントはonMouseOver、アクションは画像を入替にして、対象はpicを選択、そして入れ替える新しい画像のファイル名を指定。

※『テキストを選択して』と書きましたがビルダーで出来たかどうかは未確認です。無理なようならば『テーブルを作って、その中のセルを選択して』に読み替えてください。

id:matutake1

どうも何度もありがとうございました。

まだ完全には理解できていないのですが、お教えいただいた方法を試してみます。ご丁寧なご回答感謝いたします。

※追記です。

ホームページビルダーの「イベントの設定」でオンマウスの画像の入れ替えが出来ました。同一テーブル内の設定は無理でしたが、テーブルを分けてそれぞれ設定することで可能になりました。どうもありがとうございました。

2007/02/02 15:31:09

その他の回答(3件)

id:kn1967 No.1

kn1967回答回数2915ベストアンサー獲得回数3012007/02/02 12:58:16

ポイント50pt

お示しのtsuen.htmlのソースコードの以下の部分がそのまま答えですけど?

■スクリプトの事前準備(script.jsというファイルにスクリプトは入ってますという指示)

<script type="text/JavaScript" src="script.js"></script>

■クリックされるテキスト

<a href="javascript:;" onMouseOver="MM_swapImage('kagai','','image/img_kawai.jpg',1)" onMouseOut="MM_swapImgRestore()">カワイ体操教室</a></td>

■呼び出されるスクリプト

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

スクリプトをheadに書いても良いですが、使い回しを考えて例にお示しのページのように別ファイルにするのが通例です。

id:matutake1

早速の回答ありがとうございます。

素人で申し訳ないのですが、「■スクリプトの事前準」と「■クリックされるテキスト」のソースは<body>タグ内に書くのでしょうか?

あと「■呼び出されるスクリプト」というソースを別ファイルにするとありますが、ここがわからないです。今はホームページビルダーを使っており、この別ファイルの作り方がわからないです。すみません、、、、。

2007/02/02 13:30:16
id:kn1967 No.2

kn1967回答回数2915ベストアンサー獲得回数3012007/02/02 13:22:08

ポイント50pt

少し抜けていたので追記します。

■呼び出される画像

<img src="image/img_kagai03.gif" alt="課外教室にカーソルを合わせると画像が表示されるよ!" name="kagai" width="247" height="167" id="kagai">

ここにkagaiと書いてあり、前述して MM_swapImage を呼び出す部分にも kagai と書いてあるので、どの画像を入れ替えれば良いのかが判る仕組みになっている。

ひとり2回までなので、これにて失礼。

(質問者にはこの下に変更フォームがありますので回数変更可能です)

id:matutake1

回答数を10件に変更しました。

↑上に不明点を書きました。素人過ぎて説明のしようがないのなら仕方がないのですが、、、。教えていただけると嬉しいです。

2007/02/02 13:31:40
id:kn1967 No.3

kn1967回答回数2915ベストアンサー獲得回数3012007/02/02 14:07:37ここでベストアンサー

ポイント50pt

><body>タグ内に書くのでしょうか?


■scriptファイルの指定はhead内で指定します。

■テキストはbody内です。

■スクリプトは別のファイル(http://www.ikuei-group.com/ikuei/script.js)の中から抜き出しました。


探すのも1つの学習ですから「探しやすいように該当する部分を丸写し」しておいたのですがHTMLを直で操作ということではなくて、ビルダーで改造中ということだったのですね。


ビルダーのバージョンが判らないので概要だけになりますがHTMLを直で触らずとも以下のような作業手順で実現できるはずです。


作業手順

(1)最初に表示されている画像を配置して属性にて名前(今回は仮にpicとします)を付けておきます。

(2)テキストをドラッグで選択しておいて右クリックでイベントの設定、イベントはonMouseOver、アクションは画像を入替にして、対象はpicを選択、そして入れ替える新しい画像のファイル名を指定。

※『テキストを選択して』と書きましたがビルダーで出来たかどうかは未確認です。無理なようならば『テーブルを作って、その中のセルを選択して』に読み替えてください。

id:matutake1

どうも何度もありがとうございました。

まだ完全には理解できていないのですが、お教えいただいた方法を試してみます。ご丁寧なご回答感謝いたします。

※追記です。

ホームページビルダーの「イベントの設定」でオンマウスの画像の入れ替えが出来ました。同一テーブル内の設定は無理でしたが、テーブルを分けてそれぞれ設定することで可能になりました。どうもありがとうございました。

2007/02/02 15:31:09
id:GEN111 No.4

GEN111回答回数472ベストアンサー獲得回数582007/02/02 14:07:58

ポイント50pt

ホームページビルダーは使ったことがないのでよく分かりませんが、こんな感じでどうですか。

<html>
  <head>
    <script type="text/javascript">
      ImageSrc = new Array("Image0.jpg", "Image1.jpg", "Image2.jpg", "Image3.jpg") ;
      NewImages = new Array() ;
      for (i = 0; i < ImageSrc.length; ++i) {
        NewImages[i] = new Image() ;
        NewImages[i].src = ImageSrc[i] ;
        }

        function changeImage(n) {
        document.images['showImage'].src = ImageSrc[n] ;
        }
        </script>
    </head>

  <body>
    <div>
      <img src="Image0.jpg" id="showImage" style="float:left" />
      <a onMouseover="changeImage(1);" onMouseOut="changeImage(0);">テキスト1</a><br />
      <a onMouseover="changeImage(2);" onMouseOut="changeImage(0);">テキスト2</a><br />
      <a onMouseover="changeImage(3);" onMouseOut="changeImage(0);">テキスト3</a>
    </div>
  </body>
</html>
id:matutake1

どうも分かり易いソースを教えていただきありがとうございました。これをビルダーのhtmlタグに書き加えることで、画像の入れ替えが出来ました。

2007/02/02 15:32:17

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません