calendar

S M T W T F S
      1
2345678
9101112131415
16171819202122
23242526272829
30      
<< September 2018 >>

categories

archives

profile

商品の紹介について

このブログではアフェリエイトを利用して管理人おすすめの紹介をしておりますが、実際の取引はお客様とリンク先商品提供者との間で行われ、当ブログ並びに管理人は一切の責任を負いかねますのでご了承ください。お取引に関して生じる問い合わせは、お取引先までご連絡ください。

JavaScript・イベントで文字・画像の置き換え

0
      今回は、楽しいホームページなんかに使われている「マウス乗っけたら絵が変わる」ってのに挑戦!!

    かなり実用に近づきます。
    js37絵を替える
     

     今回学ぶ「マウス乗っけた時」、「クリックした時」「ページを読み込んだ時」などは「イベント」と呼ばれます。そして、「イベント」が起こった時に所定のプログラムを実行させるものを「イベントハンドラ」と呼びます。
     「イベントハンドラ」は、「on〜」と記述される「属性」です。
     以下に良く用いられるイベントハンドラ」「イベント」を示します。
          イベントハンドラ ・・・イベント
          onLoad・・・・・・・・・・読み込みが完了
          
    onClick ・・・・・・・・・クリックされた
          
    onMouseOver ・・・・マウスが乗った
          
    onMouseOut・・・・・マウスが離れた
    他にもたくさんの「イベントハンドラ」が有りますが、それらは、遭遇した時にマスターしましょう。

     まず、「文字の書き換え、絵の置き換え・・・DOMって言うんだって」で作った文字列書き換えのプログラムを手直しして、onLoad、onClick、onMouseOver、onMouseOutを使いイベントごとに違う動くをするようにします。
          onLoadで、ダイヤログを出す
          onClickをカウントして文字列に表示する
          onMouseOverをカウントして文字列に表示する
          onMouseOutをカウントして文字列に表示する
     プログラムの概要は以下の通りです。
        HTMLタグbdyを<body onLoad=”act0()”>として、onLoad時に処理をする関数act0()を指定する
        HTMLタグpを<p id=”xx” onMouseOver=”acta();” onClick=”actb();” onMouseOut=”actc();”> として、各イベント時に処理をする関数を指定する。
        head部分でJavaScriptの関数act0()、acta()、actb()、actc()を定義する。

    関数acta()、actb()、actc()の内容は、「文字の書き換え、絵の置き換え・・・DOMって言うんだって」のbodyの中のJavaScript記述をほとんど流用できます。

     下が、実際のプログラムです。
    js35サンプル

    右をクリックして、このプログラムの動きを見て下さい。 →JavaScript例
    マウスを適当に操作すると文字列が変わります。

     同じ要領で絵を操作してみましょう。「文字の書き換え、絵の置き換え・・・DOMって言うんだって」で作った写真置き換えのプログラムを手直しして、onClick、onMouseOver、onMouseOutを使いイベントごとに違う写真が出て来る様にします。
          onClickで、「ミッキーカメラ」を表示する
          onMouseOverで、「マミヤ35」を表示する
          onMouseOutで、「ホークアイ」を表示する
     プログラムの概要は、文字列の書き換えのケースと同じですが、写真を扱いますので、関数acta()、actb()、actc()の中で「interHTML」の代わりに「src」を使います。
    js36サンプル
    右をクリックして、このプログラムの動きを見て下さい。 →JavaScript例
    マウスを適当に操作すると写真が変わります。

     今回は少しオモシロイ学びができました。
     次回は、タイマーで画面を動かしてみたいと思います。

    なお、ホームページの「JavaScriptのabc」もアップデイトしました。こちらからどうぞ→。


    コメント
    面白いブログですね。私には少しむつかしすぎますが出来るだけ拝見させていただきます。これからもよろしく
    コメントありがとうございます。つたないブログですが、楽しくつづって行きたいと思います。気楽に覗いてください。
    ドロンケンさんのブログも拝見しました。写真が趣味なんですね。時々お邪魔します。
    • よしじい
    • 2012/09/26 9:49 PM
    コメントする








       
    この記事のトラックバックURL
    トラックバック