JavaScriptで画像クリックにより発動される処理を実装する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptで画像クリックにより発動される処理を実装する方法について現役エンジニアが解説しています。画像をクリックした時にイベント処理を発動させるには、Clickイベントを使います。今回は画像をクリックすると新しいウィンドウで拡大画像を表示するプログラムを解説します。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptで画像クリックにより発動される処理を実装する方法について解説します。

実際のコードをもとに解説していきますので、理解を深めていきましょう。

また、入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptで画像クリックにより発動される処理を実装する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

JavaScriptで画像クリックにより発動される処理を実装する方法

ページを飛ばしたり、移動する場合は「a要素」で簡単に実装が出来ます。それとは別にクリックしたら別のアクションを行う場合は、clickイベントのハンドリングを行う事で実現します。

今回は、サムネル画像をクリックして表示するスクリプトを紹介します。

実際に書いてみよう

<html lang="ja">
<head>
   <meta charset="UTF-8">
   <title>JavaScriptで画像クリックにより発動される処理を実装する方法</title>
   <style type="text/css">
     html {
       font-size: 62.5%;
       text-align: center;
     }
     h1 {
       font-size: 4rem;
     }
     img {
       float:left;
       max-width: 32%;
       width: 32%;
       cursor: pointer;
       margin-right:2%;
       border:2px solid #eee;
       box-sizing:border-box;
     }
   </style>
 </head>
 <body>
   <h1>JavaScriptで画像クリックにより発動される処理を実装する方法</h1>
   <p>
     <img src="img/001.jpg" onclick="imgwin('001.jpg')"/>
     <img src="img/002.jpg" onclick="imgwin('002.jpg')"/>
     <img src="img/003.jpg" onclick="imgwin('003.jpg')"/>
     <img src="img/004.jpg" onclick="imgwin('004.jpg')"/>
   </p>
   <script type="text/javascript">
     function imgwin(img){
         window.open("img/"+img, "imgwindow", "width=866,height=580");
     }
   </script>
 </body>
</html>

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

筆者プロフィール

小宮山晃史(こみやまこうじ)

現在はOracle系システムの導入コンサルに勤め、仕事でコーディングをする機会は少なくなくなっているが、ライフワークで数多くの言語を勉強中。

iphoneのアプリ開発やWEBサーバの構築など幅広く挑戦しています。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

また、TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。

プログラミングの初心者でも受講可能です。Webサイトの表現の幅を広げたいという方はぜひご覧ください。

また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。