ホームページ内にあるテキストにマウスのカーソルを合せと、隣にある画像枠に画像が表示されるようにしたいのですが、javascriptの知識がなく、どのようなソースコードを加えれば良いかわかりません。ご存知の方がいらっしゃいましたら、ご教示ください。（なるべくな具体的ソースの方が助かります=<head>に書くソースコード、<body>に書くソースコード）
※参考になるホームページ
http://www.ikuei-group.com/ikuei/tsuen.html
↑このページにある「課外教室について」の項の箇所にあるように横にテキストがいくつか並んでおり隣に画像枠があって、それぞれのテキストにカーソルを合せるごとに画像を表示させるようにしたいと思っています。
※画像にオンマウスすると画像が変わるソースがありますが、そうではなくてテキストにオンマウスすることで画像を入れ替えたいと思っています。）
※このページのソースから学べばいいのですが、どうやってもうまく行かないので質問しました。
No.3
2915
301
50pt
＞<body>タグ内に書くのでしょうか？
■scriptファイルの指定はhead内で指定します。
■テキストはbody内です。
■スクリプトは別のファイル（http://www.ikuei-group.com/ikuei/script.js）の中から抜き出しました。
探すのも１つの学習ですから「探しやすいように該当する部分を丸写し」しておいたのですがHTMLを直で操作ということではなくて、ビルダーで改造中ということだったのですね。
ビルダーのバージョンが判らないので概要だけになりますがHTMLを直で触らずとも以下のような作業手順で実現できるはずです。
作業手順
（１）最初に表示されている画像を配置して属性にて名前（今回は仮にpicとします）を付けておきます。
（２）テキストをドラッグで選択しておいて右クリックでイベントの設定、イベントはonMouseOver、アクションは画像を入替にして、対象はpicを選択、そして入れ替える新しい画像のファイル名を指定。
※『テキストを選択して』と書きましたがビルダーで出来たかどうかは未確認です。無理なようならば『テーブルを作って、その中のセルを選択して』に読み替えてください。
No.1
2915301
50pt
お示しのtsuen.htmlのソースコードの以下の部分がそのまま答えですけど？
■スクリプトの事前準備(script.jsというファイルにスクリプトは入ってますという指示)
<script type="text/JavaScript" src="script.js"></script>
■クリックされるテキスト
13
12
<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に書いても良いですが、使い回しを考えて例にお示しのページのように別ファイルにするのが通例です。
早速の回答ありがとうございます。
素人で申し訳ないのですが、「■スクリプトの事前準」と「■クリックされるテキスト」のソースは<body>タグ内に書くのでしょうか？
あと「■呼び出されるスクリプト」というソースを別ファイルにするとありますが、ここがわからないです。今はホームページビルダーを使っており、この別ファイルの作り方がわからないです。すみません、、、、。
No.2
2915301
50pt
少し抜けていたので追記します。
■呼び出される画像
<img src="image/img_kagai03.gif" alt="課外教室にカーソルを合わせると画像が表示されるよ！" name="kagai" width="247" height="167" id="kagai">
ここにkagaiと書いてあり、前述して MM_swapImage を呼び出す部分にも kagai と書いてあるので、どの画像を入れ替えれば良いのかが判る仕組みになっている。
ひとり２回までなので、これにて失礼。
（質問者にはこの下に変更フォームがありますので回数変更可能です）
回答数を10件に変更しました。
↑上に不明点を書きました。素人過ぎて説明のしようがないのなら仕方がないのですが、、、。教えていただけると嬉しいです。
No.3
2915301
ここでベストアンサー
50pt
＞<body>タグ内に書くのでしょうか？
■scriptファイルの指定はhead内で指定します。
■テキストはbody内です。
■スクリプトは別のファイル（http://www.ikuei-group.com/ikuei/script.js）の中から抜き出しました。
探すのも１つの学習ですから「探しやすいように該当する部分を丸写し」しておいたのですがHTMLを直で操作ということではなくて、ビルダーで改造中ということだったのですね。
ビルダーのバージョンが判らないので概要だけになりますがHTMLを直で触らずとも以下のような作業手順で実現できるはずです。
作業手順
（１）最初に表示されている画像を配置して属性にて名前（今回は仮にpicとします）を付けておきます。
（２）テキストをドラッグで選択しておいて右クリックでイベントの設定、イベントはonMouseOver、アクションは画像を入替にして、対象はpicを選択、そして入れ替える新しい画像のファイル名を指定。
※『テキストを選択して』と書きましたがビルダーで出来たかどうかは未確認です。無理なようならば『テーブルを作って、その中のセルを選択して』に読み替えてください。
どうも何度もありがとうございました。
まだ完全には理解できていないのですが、お教えいただいた方法を試してみます。ご丁寧なご回答感謝いたします。
※追記です。
ホームページビルダーの「イベントの設定」でオンマウスの画像の入れ替えが出来ました。同一テーブル内の設定は無理でしたが、テーブルを分けてそれぞれ設定することで可能になりました。どうもありがとうございました。
No.4
47258
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>
どうも分かり易いソースを教えていただきありがとうございました。これをビルダーのhtmlタグに書き加えることで、画像の入れ替えが出来ました。
1
1
どうも何度もありがとうございました。
まだ完全には理解できていないのですが、お教えいただいた方法を試してみます。ご丁寧なご回答感謝いたします。
※追記です。
ホームページビルダーの「イベントの設定」でオンマウスの画像の入れ替えが出来ました。同一テーブル内の設定は無理でしたが、テーブルを分けてそれぞれ設定することで可能になりました。どうもありがとうございました。