Javascriptで画像をクリックすると説明が表示される

このページでは、イベントハンドラーとよばれるものの中で「onclick」「onmouseover」を使った例を紹介します。

画像をクリックすると説明文がでる　onclick　を使う

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

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

イベントハンドラー「onclick」

ここでは「onclick」という命令を使います。　マウスでクリックすると何かのイベントを作動をさせるもので、上の例では、写真（画像）をクリックすると、「alert（アラート）」によって、別の小窓に写真の説明が出ます。

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

ボタンを押すと写真が表示するイベントハンドラーの例がこちらのページにあります。

1行で書けるJavascript

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

まず、1枚の写真を表示しておき、その写真にイベントハンドラーの「onclick」をつかって、この1行をHTML上に書けばOKです。　<script>～</script>に書く必要はありません。

注意点

このような簡単なものですから、注意する点は、タイプの打ち間違いをしないようにすることです。特に「半角文字と全角文字」の間違いに気をつけます。　

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

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

このように、Javascriptは、全角と半角、大文字と小文字を間違うだけでうまく動かないことが起きますので、よくあるミスで、半角スペースのところに全角スペースが、また、半角英数の1バイト文字に日本語の2バイト文字が紛れ込んでいる……などは気づきにくいので、常に文字変換に注意しましょう。

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

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

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

下に「onmouseover」の例を示します。　

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

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

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