スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

3. 記事本文のタグからスクリプトを切り離して記述します

 記事本文のタグからスクリプトを切り離すといっても、マウスが押されたときにどうするのか、という情報は最低入っていないと、マウスに反応する記事はできません。そこで、本文中には、わかりやすいように最低限のスクリプトを残して、実際のスクリプトは、別の場所に書くということになります。
 ここでは本文中に前回のマウスオーバーのプログラムを例にすれば、onmouseover="func();" とだけ記述します。この func() を関数といいます。funcという名前はID名同様で、適当な英数字でつけることができます。先頭の文字は英字でなくてはなりません。また同じHTMLのなかに同じ名前があってはならないのもID名と同様です。

 つぎに、この関数はどうするのかを定義するのが scriptタグで囲まれた部分に書きます。

<scriot>
function func() {
 ここにマウスイベントで発生するスクリプトを記述する
}
</script>

 画像と同じタグの中に、スクリプトを記述する場合には、画像の参照は this でできますが、画像の外でスクリプトが画像を参照する場合には、前回のように、画像タグのID名で参照することになります。

 ここで画像のID名を photo としたとすると、画像のURLを変更するためには photo.src の値にURLを入れてやることで実現します。

 実際にマウスオーバーのときのスクリプトは

 画像のタグの中では関数名を gazouchange とすると onmouseover="gazouchange();" と書きます。


 次にスクリプトタグの中はつぎのとおりです

function gazouchange() {
photo.src="変更する画像のURL";
}

関数は必ず { ではじまり }でおわります。

 同様に、マウスが画像から外れた時にも、関数名を変えて記述します。

 実際のスクリプトタグの中では、次のようになります。

<script>
function gazouchange1() {
photo.src="変更する画像のURL";
}
function gazouchange2() {
photo.src="最初に表示する画像のURL";
}
</script>

<img src="最初に表示する画像のURL" id="photo" onmouseover="gazouchange1();" onmouseout="gazouchange2();" />

ということになります。




このように、画像タグと、スクリプトを分けて書くと、表示のためのソースがずいぶん見やすくなります。
下に実際のソースを示します。
<script>
function gazouchange1() {
photo.src="http://blog-imgs-43.fc2.com/d/o/n/dongwcat/hiraodai201005_6.jpg";
}
function gazouchange2() {
photo.src="http://blog-imgs-43.fc2.com/d/o/n/dongwcat/hiraodai201005_5.jpg";
}
</script>

<img src="http://blog-imgs-43.fc2.com/d/o/n/dongwcat/hiraodai201005_5.jpg"
id="photo" onmouseover="gazouchange1();" onmouseout="gazouchange2();" style="width:500px; height:368px;" />

コメントの投稿

非公開コメント

Func()

全くコピペしてしまったのですが、関数Func()の「()」はどのような意味があるのでしょうか?

()の意味は

関数に渡す値として引数(argument)があります。呼び出し元から数値を変えてわたすものです。それが()の中に入るわけです。
今回の場合は、何も渡しませんから中がからになっています。なくてもやくそくごととして()はつけるのが、関数の記述の決まりです。
FC2カウンター
プロフィール

dongwcat

Author:dongwcat
FC2ブログへようこそ!

最新記事
最新コメント
最新トラックバック
カテゴリ
検索フォーム
RSSリンクの表示
リンク
ブロとも申請フォーム

この人とブロともになる

QRコード
QRコード
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。