遊べるJavaScript入門ロゴ

画像をクリックすると説明文がでるJavascript

この方法は、「onclick」という命令で何かをするイベントハンドラーを使う基本的なもので、写真(画像)をクリックすると、「alert(アラート)」によって、別の小窓に写真の説明が出るJavascriptです。

例えば、「写真の説明」をする場合などで、同様の使い方ができるケースは多いでしょう。


イベントハンドラー「onclick」を使います

***下の画像をクリックしてください。別窓で説明が表示されます。

テスト画像 大東市のナンバープレート


***最後にOKを押してください。

このJavascriptは1行で書ける

<img src="img/np_daito.jpg" onclick="alert('これは、大阪府大東市のナンバープレートです');">

という1行のコード(青字部分)だけで、画像をクリックすると、その説明が別枠に表示されます。

まず、1枚の写真を表示しておき、その写真にイベントハンドラーの「onclick」を仕込みます。

HTML上に書けば良く、<script>~</script>に書く必要はありません。


注意点

このような簡単なものですから、注意する点は、タイプの打ち間違いをしないようにすることです。 

説明文は通常は「全角文字(日本語)」で書くので、HTML部分が半角(半角英数字)にすることに注意します。

例えば、onclick の前の半角スペースが全角スペースになっている… などではうまく動きません。

このように、Javascriptは、全角と半角、大文字と小文字を間違うだけでうまく動かないことが起こるので注意しましょう。

よくあるミスですが、半角スペースのところに全角スペースが、また、半角英数の1バイト文字に日本語の2バイト文字が紛れ込んでいるとわかりにくいので、常に文字変換に注意しましょう。


イベントハンドラーの種類はいろいろあります

このHPでは、「onclick」をよく使います。 Javascriptを実行するタイミングを指定するものが「イベントハンドラー」で、これらは便利に使うことができます。

「onclick」の他には、マウスを写真などの「要素」の上に移動したとき(onmouseover)、ページが読み込まれたとき(onload)、などがあります。 

下に「onmouseover」の例を示しますが、ここではその他の実例は紹介はしていませんが、WEBではいろいろな方が取り上げておられますので、それを参考にしていただくといいのですが、「ダブルクリックしたとき」「マウスを移動したとき」「ページを読み込んだとき」「ページを移動するとき」「エラーが出たとき」「フォームが変更されて時」「submitボタンが押されたとき」など、面白い使い方ができます。

また、別のページ(→こちら)などの「イベントリスナー」も同様の働きをさせるものですので、合わせて使い方を見ておいてください。

ここではもう一つの例で、画像の上にマウスを置いたときに説明文が表示される「onmouseover」の場合を示します。

PR

画像にマウスを置くと説明文が出る(onmouseover)


**** 写真にマウスを置くと別窓で写真の説明が出ます

大阪府大東市のナンバープレート



***** 最後にOKを押してください。



このコードも、1行で書ける、ごく簡単なもので、上の1行スクリプト文の 「onclick」 を「onmouseover」に変えているだけです。

<img src="img/np_daito.jpg" onmouseover="alert('これは、大阪府大東市のナンバープレートです');">  のように、上の「onclick」に対して、ここでは、「onmouseover」になっているという違いだけです。

記事の目次へ

PR


Page Top▲

(来歴)R6.5作成  
PR

AmazonのJavascript本 送料無料


楽天ブックスは品揃え200万点以上!



記事の目次へ

電子工作の記事の目次へ