質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

3回答

67817閲覧

画像をクリックしたときにJavaScriptを実行させる方法を教えてください

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2015/10/05 05:59

画像はpng(sample.png)です
このpngをクリックするとJavaScriptが実行されるようにしたいです
またこのJavaScriptはHTMLのファイルとは別に作っています
以下のプログラム(一部省略)を書いてみたのですがこのHTMLを開いたときにJavaScriptが実行されてしまいpngのボタンとうまくひも付きません
どこを改善したらよいのか教えてください

html

1<body> 2 <script src="foo.js"></script> 3 <img src="javascript/sample.png"> 4</body>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

HTMLの方にidを付与し

HTML

1<img id="hoge" src="javascript/sample.png">

jQueryなら

jQuery

1$("#hoge").click(function(){ 2 //クリック後の処理 3});

Javascriptなら

Javascript

1var p = document.getElementById('hoge'); 2function hogehoge(){ 3 クリック後の処理 4} 5 6p.attachEvent('onclick', hogehoge);

こんな感じで紐付けられるかと

投稿2015/10/05 06:33

rossi46hiro

総合スコア992

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2015/10/05 22:20

回答ありがとうございました
退会済みユーザー

退会済みユーザー

2015/10/07 13:46

addEventListenerというのもあるのですね ありがとうございます
guest

0

imgタグのonclickイベントに、実行したい関数を設定すればよいと思いますが、
いかがでしょうか?

HTML

1<head> 2<script type="text/javascript" src="./js/foo.js"></script> 3</head> 4<body> 5<img src="javascript/sample.png" onclick="popup();"> 6</body> 7 8foo.js 9function popup() { 10 alert("onClick!"); 11}

投稿2015/10/05 06:47

KatsumiTanaka

総合スコア924

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2015/10/05 22:19

回答ありがとうございました
guest

0

ベストアンサー

以下のようにして画像にリンクをつけてやれば出来るはずです。

HTML

1<a href="#" onclick="imgClick();"><img src="javascript/sample.png"></a>

imgClickの箇所に実行したい関数を書いて下さい。
また、HTMLを開いた時に実行されるのは関数化されていないのでは?と思いますが。

以下のように関数を定義してやれば実行出来るはずです。

JavaScript

1function imgClick() { 2 alert("クリックされました"); 3} 4

投稿2015/10/05 06:27

rice

総合スコア70

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2015/10/05 22:19

できました、ありがとうございます 今回は個人的にもっともわかりやすかったriceさんの回答をベストアンサーにさせていただきます ありがとうございました
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問