スポンサーサイト

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

1. マウスオーバー、アウトで写真を切り替えましょう

 ブログでもマウスイベントを使った動く記事を書くことができます。このFC2のブログは、いろいろな面で、Javascriptの勉強をするのに適していると思います。
 私は今までは、Gooブログの制約のある中でいかにしてスクリプトを記述するかという離れ業的なことを楽しんできましたが、ここでは素直に、ブログの記事を書きながら、いつの間にかJavascrptに親しんで、自分のホームページを豊かに表現できる基礎を養うことができることを目指します。

 HTMLもXHTML5というバージョンになりつつあり、こうなるとFLASHなどの外部アドインの力を借りて表現するしかなかったことが、HTMLで表現できるようになります。アップルのiPadがFlashをサポートしない理由も、この方向だと思います。
 そんな時代の流れについていくためにも、ここでscriptに慣れていくことは大切です。

 今回は「ブログでJavascript」シリーズの第一弾として、簡単なマウスオーバー、マウスアウトのイベントを使った画像のきりかえに挑戦します。
 下の例は、違うサイズの画像を常に真中に表示するために、あえてテーブルを使ってみました。テーブルの記述も、ブログの文字数を減らすために、必要最小限のタグに限定し、table、tdのタグだけを使っています。あまりお行儀がよくないとは思いますが、ソースの見やすさからも、この方がベターだと判断いたしました。

 マウスが画像の上に乗った時におきるイベントは

      onmouseover="....Event Prog......"

 マウスが画像から外れるときにおきるイベントは

      onmouseout=".....Event Prog......"

 イベントのプログラムは、この画像のソースをいかにしますというスクリプトで

      this.src='変更される画像のURL';

 一般的なスクリプトでは、URLを囲むかっこは " ですが、外側にすでにかっこが使われていますので、混乱しないように ' でくくります。



写真は平尾台のジャケツイバラとカノコユリです Photo by Donguri

<table> <td style="width:600px; height:600px; text-align:center; virtical-align:center;"> <img src="http://blog-imgs-43.fc2.com/d/o/n/dongwcat/hiraodai201005_2.jpg" style="border:solid 1px;" onmouseover="this.src='http://blog-imgs-43.fc2.com/d/o/n/dongwcat/hiraodai201005_3.jpg';" onmouseout="this.src='http://blog-imgs-43.fc2.com/d/o/n/dongwcat/hiraodai201005_2.jpg'" /> </td></table>


コメントの投稿

非公開コメント

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

dongwcat

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

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

この人とブロともになる

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