第2回　Tips1 イベントで色を動的に変化させたい

Tips 1

イベントで色を自動的に変化させたい

JavaScript

	＞＞		point　jQueryとプラグインを使用
	＞＞		point　複雑な効果を与えられる

リンクが貼ってあるテキストやボタンにマウスカーソルが乗ったときなどに、文字色や背景色、ボタン画像を変更する表現はよくあるだろう。「DesiznTech」の「Playing with jQuery Color Plugin and Color Animation」（desizntech.info/2009/06/playing-with-jquery-color-plugin-and-color-animation/）で紹介されている方法を参考に、JavaScriptを使用して色を変更してみよう【1】。

まずはHTML【2】、CSS【3】を用意しよう。HTMLには「jQuery」（jquery.com/）と「Color Animations Plugin」（plugins.jquery.com/project/color/）を読み込んである【4】。JavaScriptではマウスオーバー（前半部分）とマウスアウト（後半部分）したときに変わる色と変更にかかる時間をミリ秒で指定している【5】。

上記のWebサイトからダウンロードしたサンプルではbackgroundの色を変更するように指定してあるが、colorを指定することで文字色を変更することも可能だ。背景色を変更しながら文字色を変更しないと視認性が下がってしまう場合もある。そうならないためには文字色の変更も同時に指定しておくことが必要になってくる【6】。

次にこのサンプルの背景色をランダムで変更するカスタマイズを紹介しよう。まずは【7】のようなJavaScriptを用意しよう。最初にoriginalという変数にCSSで指定してある背景色を代入している。前半はマウスオーバー時の指定をしており、変数colにRGBで色を指定してある。Math.random()で0以上1未満のランダムな値を取得し、その値と256を掛け合わせている。Math.floor()で得られた値の小数点以下を切り捨てて、0から255の整数値を「r,g,b」のそれぞれに入れている。変数colに入ったものを【8】のように指定することで背景色として指定している。マウスアウトした際に元の色に戻すために【9】のようにoriginalを指定してある。

マウスオーバーの動きについては:hoverなどの疑似クラスを使うことが多いと思うが、このようなJavaScriptを使用することで、複雑な動作も可能になる。必要に応じて使い分けてみてはどうだろう。