JavaScriptで画像クリックイベントを発生させる方法
- JavaScriptで画像をクリックするとイベントを発生させる方法について詳しく解説します。
- 特定の画像をクリックした際にアラートメッセージを表示するJavaScriptのコードを作成した際に、エラーが発生する原因とその解決方法について説明します。
- クリック時にエラーが発生する場合、構文の間違いが考えられます。JavaScriptのコードを見直し、正しい構文に修正することでエラーを解消できる可能性があります。
- ベストアンサー
javascript 画像をクリックするとイベントを発生させたいのです
javascript 画像をクリックするとイベントを発生させたいのですがエラーが出てしまいます。 画像をクリックするとalertが表示されるコードを作成したつもりなのですが、 クリックしたときに、IEの左下に"ページでエラーが発生しました"というエラーが出てしまいます。 本などを読んで組み合わせて作成したコードなのですが、 構文間違いがあるのだと思うのですが、自分ではどこが違うのか分からず困っています。 もし、どこが間違っているか気付かれた方がいましたらご指摘願います。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Insert title here</title> </head> <script type="text.javascript"> <!-- function clickhoge(){ alert("クリックしました!"); } --> </script> <body> <div> <img id="hoge" src="hoge.png" style="left:0px; top;0px;" onClick="clickhoge();" > </div> </body> </html>
- fretum765
- お礼率100% (14/14)
- JavaScript
- 回答数2
- ありがとう数13
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
<script type="text.javascript"> <script type="text/javascript"> style="left:0px; top;0px;" style="left:0px; top:0px;" img には、 alt をつけよう --> を //-->
その他の回答 (1)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Insert title here</title> <script type="text/javascript"> <!-- function clickhoge(){ alert("12345679"); } --> </script> </head> <body> <form action="" > <input type="button" value="TEST" onclick="javascript:clickhoge();"> </form> </body> </html>
お礼
input type="button" 上記の設定でソースを組んだ方が良いというご指摘ですね。 アドバイスありがとうございました。
関連するQ&A
- JavaScriptのinnerHTMLの挙動について
下で"JavaScript内からJavaScriptを書き出したいのですが"で質問したものですが，ソースコードを簡単にして再質問したいと思います． ソースは以下のようにし，divタグのところにinnerHTMLで文字"test"とJavaScriptでアラートを表示させるものです．表示してみたところ，"test"は表示されるのですが，アラートは出てきません． これはinnerHTMLではHTMLのタグは評価されるが，JavaScriptは評価されない，ということなんでしょうか．JavaScriptのこのような仕様は調べにくいので困っています．回答宜しくお願いします． <html><head><title></title> <SCRIPT type="text/javascript"> <!-- var str='<font color="blue">test</font><script type="text/javascript">alert(123);</script>'; function gogo(){ document.all("here").innerHTML = str; } //--> </SCRIPT> </head><body> <div id="here" style="position:absolute;width:600px;left:0px;top:0px;"></div> <SCRIPT type="text/javascript"> <!-- gogo(); //--> </SCRIPT></body></html>
- ベストアンサー
- JavaScript
- マウスカーソルに合わせて画像が移動するjavascriptで困っていま
マウスカーソルに合わせて画像が移動するjavascriptで困っています。 マウスカーソルに合わせて画像が移動するソースコードを書いたのですが、 マウスカーソルの動きについていけず、画像がワープ（？）してしまいます。 解決策が分かる方がいらっしゃいましたら、ご指摘願います。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <TITLE></TITLE> <SCRIPT> <!-- function move(event){ img.style.left=event.x; img.style.top=event.y; } //--> </SCRIPT> </HEAD> <BODY> <IMG src="hoge.png" name="img" style="position:absolute;" > <div onmousemove="move(event);" style="width:500px; height:500px; background-color:#cccccc;"></div> </BODY> </HTML>
- ベストアンサー
- JavaScript
- JavaScriptの件
初心者用JavaScriptの本で下記のソースを本の通り打ち込んだと思うのですが、何度打ちなおしても「ページにエラーが発生しました」が出てしまいます。どなたかどこが間違っているのか教えて下さい。よろしくお願いします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>関数の練習</title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <SCRIPT language="JavaScript"> <!-- function kotae(){ var yama="富士山"; alert(yama); ｝ //--> </script> </head> <body> <h3>問題</h3> 日本で一番高い山は？ <BUTTON onClick="kotae()">答えを見る</BOTTON> </body> </html>
- 締切済み
- ホームページ作成ソフト
- JavaScript内からJavaScriptを書き出したいのですが
こんにちは． JavaアプレットとJavaScriptを利用してJavaScriptを書き出すコードを書いてみたのですが，うまく動きません．具体的なコードは以下のようで，リンクはできるのですが，マウスを乗せるとオブジェクトを指定してくださいとエラーがでます．innerHTMLでJavaScriptを書き出すことはできないのでしょうか？ <html> ・・・ <body> <SCRIPT language="JavaScript" type="text/javascript"> <!-- function dWrite(){ str='<script type="text/javascript">functionLinkMo(){varLM1;LM1=window.open"","Doc","toolbar=no,location=no,kdirectories=no,width=300,height=250");LM1.document.write"<html><head><title></title></head><body>testです/body></html>");LM1.document.close();}</script><body>rinku <ahref="#"onMouseOver="LinkMo()">ここにのせると</a></body></html>'; document.getElementById("here").innerHTML=str;} //--> </script> <applet ・・・dWriteを呼び出す></applet> <div id="here" style="position:absolute;width:600px; left:0px;top:0px;"> </div></body></html>
- ベストアンサー
- JavaScript
- クリックして画像を表示JavaScriptについて
友人がJavaScriptに苦戦しています。 ボタンをクリックすると、画像が表示されるプログラムを作りたいそうです。以下、送られて来たコードです。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div class="box"><!--attr (DOMのsetAttributeと同じ)--> <script> addEventListener("load",()=>{ document.getElementById("btn").addEventListener("click",()=>{ //$("img").attr("src","./image.jpg"); document.getElementById("aa").style.color = "white"; document.getElementById("img").style.backgroundImage = "./image.jpg"; }); }); </script> <button id="btn">ここをクリックで画像表示</button> <p id="aa">aa</p> <img id="img"> </div> </body> </html> なぜかボタンをクリックしても、画像が表示されません。なぜなのでしょうか？教えて頂きたく思います。
- ベストアンサー
- JavaScript
- javascriptの件
javascriptの勉強を始めた超初心者です。購入した本の通りソース下記を打つたつもりで、何度もチェツクしたにですが、左下の「エラーが発生しました」と表示されその個所をダブルクイックしますと 「文字が正しくありません」→ [sima.html] と「オブジェクトを指定して下さい」と表示されます。 どなたかお手数ですがどこがミスってるのかお教えいただけませんか？ よろしくお願い致します。 (IE7使用です） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>関数の練習</title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <script language"javascript" > <!- - function photoinfo(){ alert('タヒチの写真です!'); ｝ //- -> </script> </head> <body> <img src="tahiti01.jpg" onclick="photoinfo()"> </body> </html>
- ベストアンサー
- ホームページ作成ソフト
- クリックする度に表示/非表示が切り替わるスクリプト
クリックする度に表示/非表示が切り替わるスクリプト Content1をクリックするとSubContentsの表示/非表示が切り替わるスクリプトを組みたいのですが、 下記スクリプトのjavascript内で表示/非表示の実現方法がよくわかりません。 調べるとStyleのVisibilityという要素(?)を指定することで表示/非表示が切り替えられる可能なのは分かったのですが、具体的にはどんなプログラムを組めばいいのか分かりません。 どなたかご教授お願いします。 <html> <head> <title>Template</title> <style type="text/css"> span.content{ background-color: #FFCC66; width: 100; height: 20; } div.subcontent { position: absolute; top: 40px; left: 40px;} </style> <script language="javascript"> function cont_pop(){ //ここをどうすれば良いでしょうか？ } </script> </head> <body bgcolor=#EEEEEE> <span id="cont1" class="content" onClick="cont_pop()">Content1</span><BR> ↓これを表示/非表示させたい <div class="subcontent" id="scon1"> SubContents </div> </body> </html>
- ベストアンサー
- JavaScript
- javascriptについて教えてください。
divのボタンを作りたいと思い、調べながらjQueryを使う方法は以下のようにしたらいい事は分かったのですが、jQueryを使わずにしようと思い $(function(){ $("div").click(function(){ var x = this.id; alert(x); }); }); の部分を document.getElementsByTagName("div").onclick = function(){ var x = this.id; alert(x); }; としてみたのですが、うまくいきません。jQueryを使わずに同じようなボタンを作るにはどうしたらいいのでしょうか？ <!doctype html> <html> <head> <meta charset="UTF-8"> <title>無題ドキュメント</title> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js"></script> <script type="text/javascript" language="javascript"> $(function(){ $("div").click(function(){ var x = this.id; alert(x); }); }); </script> </head> <body> <div id="aaa" class="div_link">a</div> <div id="bbb" class="div_link">b</div> <div id="ccc" class="div_link">c</div> <div id="ddd" class="div_link">d</div> <div id="eee" class="div_link">e</div> </body> </html>
- ベストアンサー
- JavaScript
- jqueryでのkeydownイベント発生回数制御
main.html************************************* <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title></title> <meta http-equiv="Content-Style-Type" content="text/css"> <link href="css/ffUI.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="script/jquery.js"></script> <script type="text/javascript" src="script/ffmain.js"></script> </head> <body> <div id="main"> </div> </body> </html> ffUI.css*************************************** * {margin:0;padding:0;} #main {width:320px;height:240px;overflow:hidden;} #map {margin-top:0px;margin-left:0px;} ffmain.js************************************** mainFunction(); function mainFunction(){ $("#main").append('<div id="map"><image src="image/maptest.gif"></div>'); $(window).bind("keydown",mainKeyIvent); } function mainKeyIvent(e){ switch(e.keyCode){ case(38): $("#map").animate({marginTop:"+=16px"}); break; case(40): $("#map").animate({marginTop:"-=16px"}); break; case(37): $("#map").animate({marginLeft:"+=16px"}); break; case(39): $("#map").animate({marginLeft:"-=16px"}); break; } } というコードを書いて、RPGのMAPのように、 出した画像が上下左右のキーで16ピクセルずつ動くコードを書いてみたんですが、 一応動きはしますが、キーを押しっぱなしにすると、 その間にキーイベントが蓄積されて、右を押していたら、 キーを離してもずーっと右に動きっぱなしなってしまったりします。 押している間は動き続けてもいいですが、離した瞬間にちゃんと止まるようにしたいんですけど、 どのようにコーディングすればよいでしょうか？ 環境はsafariです。 宜しくお願いしますm(__)m
- ベストアンサー
- JavaScript
- borderの箇所をマウスでクリック
cssでborderを指定し ajaxで枠内、枠外では何も動作しないが borderの箇所をマウスでクリックした場合のみ 動ささせるにはどのようにすればいいでしょうか。 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function () { $("div.button").mousedown(function () { $("div#message").text("マウスのボタンが押されました。"); }) $("div.button").mouseup(function () { $("div#message").text("マウスのボタンがはなされました。"); }) }) </script> <style> .button { border: solid 1px #0094ff; background-color: #e1e1e1; width: 200px; height: 32px; } </style> </head> <body> <div class="button">枠</div> <div id="message"></div> </body> </html>
- ベストアンサー
- AJAX
お礼
text.javascript → text/javascript --> → //--> 上記の変更で無事実行できました。 迅速な返答ありがとうございました！！