プログラムを文字や画像のクリックで実行させる
このサイトでは、フォームのボタンを使ってプログラムを作動させている事が多いのですが、文字や画像から実行させる例をご紹介します。
ボタンでアラートを表示させよう 1 のところで紹介しているプログラムを例にご説明します。
表示の例
ソース
<SCRIPT LANGUAGE="JavaScript">
<!--
function warning(){
alert("このウインドウを「アラート」といいます。\nちょっとしたコメントなんかに便利ですよ。");
}
//-->
</SCRIPT>
<FORM><INPUT type="button" value="ここを押してね!" onClick="warning()"></FORM>
function warning() のwarning() を関数名といいます。このプログラムの名前のようなものです。
<INPUT type="button" value="ここを押してね!" onClick="warning()"> の部分がボタンのソースになっていて、onClick="warning()" となっています。
これは、ボタンをクリックしたら warning() というJavaScriptプログラムを実行させるという意味です。
ボタンではなく、文字で warning() というJavaScriptを実行させるソースは、下のようになります。
表示の例
ここを押してね!
ソース
<SCRIPT LANGUAGE="JavaScript">
<!--
function warning(){
alert("このウインドウを「アラート」といいます。\nちょっとしたコメントなんかに便利ですよ。");
}
//-->
</SCRIPT>
<a href="#" onClick="JavaScript:warning();return false"><font style="font-size:15px;" color="#666666">ここを押してね!</font></a>
onClick="JavaScript:warning();return false" の部分でプログラムを実行させています。
a href="・・・" はよくあるリンクのソースですが、ここでは warning() というJavaScriptを実行させるために使っています。
同じように、画像をクリックして実行させるソースは、下のようになります。
表示の例
ソース
<SCRIPT LANGUAGE="JavaScript">
<!--
function warning(){
alert("このウインドウを「アラート」といいます。\nちょっとしたコメントなんかに便利ですよ。");
}
//-->
</SCRIPT>
<a href="#" onClick="JavaScript:warning();return false"><img border="0" src="images/click.gif" width="72" height="19"></a>
<img border="0" src="images/click.gif" width="72" height="19"> の部分が画像の指定をしているところです。
src="images/click.gif" の images/click.gif をあなたの表示させたい画像のファイル名にかえてください。この images/click.gif は大きさが、よこ72ピクセル、たて19ピクセルの画像ですから、width="72" height="19" となっています。この 72  19 は、あなたのえらんだ画像の大きさにかえてくださいね。
ソースの文字をかえる時に、" や ; を消してしまわないようにしてください。
5・6年生にもわかるやさしいJavaScriptのTOPへ