2015年1月17日土曜日

画像反転JavaScript復活

 昨年の5月、長く利用しているプロバイダのYahoo!に大規模な改変があり、ヤフージオログや無料カウンター、訪問者解析ツール等が使えなくなった。
 ブログはBloggerに移行し、カウンターも別の無料カウンターに移行。解析ツールはスッパリあきらめて、万事OKのはずだったが、ひとつだけ不都合が発生した。HPのトップページで使っていたジャバスクリプトの一部が、使用不能になってしまったのだ。

 トップページ左端にある6つのメニューからひとつを選んでジャンプする際、マウスポインタをあてがうと画像が反転するという、一種のアニメ効果である。HPの開設当初に専門書を買い求め、苦労して自作したものだったが、どこが悪いのか、急に動作しなくなった。
 不思議なことにローカルから、つまりはネット経由ではなく、PC内にあるファイルから直接ブラウザに読み込むと正常に動作する。


 何度か修復を試みたが、うまくいかない。メニュー自体は選択可能なので、しばし放置していたが、最近また気になりだし、別サイトにある手法を参考に大幅な修正を加えたら、今度は以前と同じように動作するようになった。

 写真の上の画像が何もしない状態で、下がマウスポインタを載せた状態。「MUSIC」の文字が赤から白に変わり、リンゴのかじった跡が大きくなる。他のメニューにもそれぞれアニメ効果を施してある。
(画像下のポインタ右に表示される内容表示の吹き出しも、ジャバスクリプトを使ったもの)
 HP閲覧そのものには無関係の動作だが、あるとないとでは大違い、と自画自賛。人生、ささやかなアソビ心は欠かせない。
 修正にあたって、「イヌでもわかるJavaScript講座」を参考にさせていただきました。ありがとうございます。
 今回、画像で説明するためにスクリーンショットを使ったが、なぜかマウスポインタだけが撮影されない。不信に思って調べてみたら、Macに標準でついている「グラブ」という特別なソフトを使う必要であることを知った。
 分かっているつもりでいても、まだまだ知らないことはたくさんある。