スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Gooブログで簡単なゲームに挑戦するシリーズ 1 オンクリック

 ブログは本来だれでも簡単にそして気軽に投稿できて、訂正も楽なのがいいところ。そんな手軽な環境の中で、HTMLのタグや簡単なJavascriptを勉強できたら、あまり深くすべてを知らなくてもおもしろいページができる。
 今回は、GooBlogでは私の頭のなかの整理もかねて、解説つきで簡単なゲームに挑戦したいと思う。

 第一回は、マウスイベントだ。

 写真のスライドショーをスクリプトをコピーして、部分的に入れ替えることはできるようになったが、どうなっているのか知ると、自分なりにカスタマイズすることができるようになり、ブログの面白さがます。

 マウスイベントには、いくつかあるが、今回は、クリック、オンマウスオーバー、オンダブルクリックの3つを勉強する。

 クリックは、マウスの左ボタンを1回クリックするときの処理を記述する。
 オンマウスオーバーは、マウスが上に来たときの処理。
 オンダブルクリックは、マウスの左ボタンを2回すばやくダブルクリックしたときの処理を記述するものだ。

 オンクリックの命令は onclick="処理"
 オンダブルクリックは ondblclick="処理"
 オンマウスオーバーは onmouseover="処理"

という風に記述する。

 今回処理は alert('表示する文字列'); というジャバスクリプトの命令を使ってみる。

 イベントの基になるものがいるが、今回は以前使ったPLAYボタンの画像を使う。

第一に、ボタン画像を表示するタグを記述する

 <img src="ボタンの画像のURL" />で画像をブログに表示できるから、実際のボタンのURLが http://blog-imgs-43.fc2.com/d/o/n/dongwcat/12723593534bd6a9b98df53_import.png であるから、
<img src="http://blog-imgs-43.fc2.com/d/o/n/dongwcat/12723593534bd6a9b98df53_import.png" />
でボタンが表示される。

そのあとで、そのボタンがクリックされたときのイベントを記述するためには、

<img src="ボタンの画像のURL" onclick="alert('ボタンが押されました');"/>
とすると、ボタン画像の上でマウスの左ボタンをクリックすると「ボタンが表示されました」という注意のウインドウが表示されるわけである。

これを完成させると次のようになる。
<<img src="http://blog-imgs-43.fc2.com/d/o/n/dongwcat/12723593534bd6a9b98df53_import.png" onclick="alert('ボタンが押されました');" />
ただしGOOブログでこのイベントを記述するときは、最初の<を2回繰り返すことによって、実際に動くようになる。

<

ところが上のボタンの前に<しるしが残ってしまう。
この<の表示を隠すために、フォントのサイズを0にし、できればフォントの色を背景色(この場合白)にしてやるとこの文字が事実上消えてしまう。

この命令タグが以下である。
<span style="font-size:0px; color:white;"><<イベントを含むタグ>></span>
とやれば必要ない<>が消えてしまう。

私のやり方は、<<と二つの括弧で始まったタグは、一つでもいいのだが>>と二つの括弧でくくってやることにしている。それは後で<<を<span style="font-size:0px; color:white;"><<にエディターで一括置換できる。そして>>を>></span>と一括置換してやれば、ゴミが残ってしまうことを抑制することができる。

それでは完成タグは以下です。

<span style="font-size:0px; color:white;"><<img src="http://blog-imgs-43.fc2.com/d/o/n/dongwcat/12723593534bd6a9b98df53_import.png" onclick="alert('ボタンが押されました');">></span>

実際の配置例

<>

と上の例で出ていた<というゴミは消えてしまう。

第一回はこのくらいで。
                          つづく


コメントの投稿

非公開コメント

FC2カウンター
プロフィール

dongwcat

Author:dongwcat
FC2ブログへようこそ!

最新記事
最新コメント
最新トラックバック
カテゴリ
検索フォーム
RSSリンクの表示
リンク
ブロとも申請フォーム

この人とブロともになる

QRコード
QRコード
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。