| JavaScript onclickの使い方 | 2008-07-23 |
 | 詳解JavaScript&Dynamic HTML辞典 第3―Ajax対応 (2007/03) 半場 方人 商品詳細を見る 豊富なリファレンス。 |
これからはJavaScriptを使えないとだめでしょうね。
そう思って、私も最近勉強を始めました。
この言語って、ホント出来る事が多いですね。
全てを網羅するには、とてもじゃないけど、時間がありません。
でも、網羅する事が出来たときは、もはや敵なしかもしれませんね。
***********関連サイト***********
・独学JavaScript その1（独学道場）
*******************************
***********参考サイト***********
・とほほのJavaScriptリファレンス
*******************************
まず、関連サイトをご覧ください。
サイト内、「独学JavaScript その1」です。
表示された画像をクリックすると、そのお店にリンクします。
なんて事はない機能ですが、意外と使えそうな機能だと思ったので、メモです。
まずはHTMLファイル。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=EUC-JP">
<meta http-equiv="Content-Type" content="text/css">
<link rel="stylesheet" href="../css/jsOnclick.css" type="text/css">
<script type="text/javascript" src="../js/onclick.js" />
<TITLE>onclickの使い方</TITLE>
</HEAD>
<BODY>
鶏料理が美味しい六本木♪
<div id="bgImage01"></div>
画像をクリックすると、このお店のサイトに飛びます。
</BODY>
</HTML>
bodyタグの中には、文章とdivタグしかありません。
画像はCSSで指定しました。
（画像は直接記述した方が良さそうです。あまり応用が利きません。）
ここにJavaScriptを読み込んでいます。
では、CSSファイル及び、JSファイルです。
CSSファイル。
div#bgImage01{
background-image:url("../image/ruri.jpg");
width:200px;
height:200px;
}
JSファイル。
window.onload = function() {
document.getElementById("bgImage01").onclick = function() {
window.location.href = "http://www.rijyu.com/pc/index.html";
}
}
CSSで画像とその大きさを指定しました。
そして、JSファイルで画像がクリックされたら指定してあるURLへジャンプするようにしました。
「document.getElementById()」は、タグのIDを取得します。
IDとして、divタグのID（bgImage01）を取得しました。
「onclick」は、クリックされた場合という意味です。
「function(){}」の中に、このタグがクリックされた場合の処理を記述します。
今回は、リンク先へ飛ばしたいので、「location.href="URL"」を記述しました。
これで、先ほど見て頂いたページが出来上がります。
この機能、他に応用が利きそうなので、メモしておきます。
・独学JavaScript その1（独学道場）
*******************************
***********参考サイト***********
・とほほのJavaScriptリファレンス
*******************************
まず、関連サイトをご覧ください。
サイト内、「独学JavaScript その1」です。
表示された画像をクリックすると、そのお店にリンクします。
なんて事はない機能ですが、意外と使えそうな機能だと思ったので、メモです。
まずはHTMLファイル。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=EUC-JP">
<meta http-equiv="Content-Type" content="text/css">
<link rel="stylesheet" href="../css/jsOnclick.css" type="text/css">
<script type="text/javascript" src="../js/onclick.js" />
<TITLE>onclickの使い方</TITLE>
</HEAD>
<BODY>
鶏料理が美味しい六本木♪
<div id="bgImage01"></div>
画像をクリックすると、このお店のサイトに飛びます。
</BODY>
</HTML>
bodyタグの中には、文章とdivタグしかありません。
画像はCSSで指定しました。
（画像は直接記述した方が良さそうです。あまり応用が利きません。）
ここにJavaScriptを読み込んでいます。
では、CSSファイル及び、JSファイルです。
CSSファイル。
div#bgImage01{
background-image:url("../image/ruri.jpg");
width:200px;
height:200px;
}
JSファイル。
window.onload = function() {
document.getElementById("bgImage01").onclick = function() {
window.location.href = "http://www.rijyu.com/pc/index.html";
}
}
CSSで画像とその大きさを指定しました。
そして、JSファイルで画像がクリックされたら指定してあるURLへジャンプするようにしました。
「document.getElementById()」は、タグのIDを取得します。
IDとして、divタグのID（bgImage01）を取得しました。
「onclick」は、クリックされた場合という意味です。
「function(){}」の中に、このタグがクリックされた場合の処理を記述します。
今回は、リンク先へ飛ばしたいので、「location.href="URL"」を記述しました。
これで、先ほど見て頂いたページが出来上がります。
この機能、他に応用が利きそうなので、メモしておきます。