ささやかな自己満足。

実はビリヤード小林のホームページを
作っている自分ですが、ビリヤード小林に
所属するあるプロ選手から、ホームページの
リニューアルの時期にある要請を受けました。

俺システムをもし出来たら作って欲しいというもので、写真の手玉にマウスポインターを載せると、密かなメッセージが公開されるみたいな事は出来たら面白いねっ！なんて興味深い話を頂いた。

そこで考えたのは、手玉の画像にJavascript で　マウスオーバーさせると言う発想だった。そうして、第一作目が完成したのだが、なんだか凄くインパクトが薄くなった。手玉の周辺にだけ文字が浮かび、なんとも不自然なものになってしまったのだ・・・。

そこで考えた･･･そして、画像そのものを入れ替える作戦に出た。

大きな文字でメッセージを加え、ロールオーバーで写真を完全に入れ替える物ができたんですが、、完成したらしたで、今度はもっとわがままになって、文字を写真から浮いた感じに仕上げたいと考え始めた。そこで思いついたのが、画像を少し大きめのdiv ボックスで囲み、スタイルシートのabsolute を使って写真の位置を固定しつつも、背景と同じ色の枠を画像に加える事で、自然な配置が出来上がった。

そこまで来ると、もうマウスオーバーなんか使わず、ＣＳＳだけで出来るんじゃないかと思い始め、追求し始めた。

そして、この効果が出来上がった。

http://kobayashi.silver-dice.com/content/pro.html#ore

凄く画期的だったのは、a:hover で　width や height の枠を広げる事が出来るという事が解った事で、リンクは手玉の画像のみに貼ってあるんですが、マウスが手玉のリンクに乗ると、hover 効果で横幅と縦幅が広がり、写真が完全に入れ替わると言うもの・・・。

うーん・・・うまく表現できない・・・。

Javascript を使えば、簡単に出来ることなんだろうけど、あえて追求した事で、新たなＣＳＳの可能性が見えた。

ただ、問題点がいくつかある・・・。

一つは、hover 効果を使うために、手玉の画像にリンクを貼らなくてはならないという事・・・。
この画像については、リンク先を画像の入っているdiv ボックスのid にしてごまかしたけど、リンクを画像に貼らないでこの効果を作れるかというと、正直微妙・・・。

もう一つは、ＩＥでは最初に画像を読み込むのに、若干時間がかかる為、すこしイラっとすることと、OPERAブラウザでは、最初の一回はhover 効果による横幅と縦幅の広がりが行われない事だと思います。

いや、きっともっと問題沢山あるんだろうけど、現段階ではわかってないです。

だけど、ここからどんどん発展させる事はできると思いました。これは多分スタートラインなんだと思ってます。

これを発展させた形で、びり？ビリオフ会♪の公式サイトで面白い物を試しに作って見ました。
http://b-off.silver-dice.com/

更新履歴の左側にあるアイコンにポインターが乗ると、画像の横幅が広がって、文章が現れるというもの。
しょぼいけど、少しだけ使い方がマシになったと思う（笑）

もう少し研究したら、もっと使える技術になるかもしれないと、個人的にいろいろためしております。

でも、やっぱり Javascript を使った方が早いのかな･･･いや、javascript をオフにしている人をビックリさせることが、この技術を磨く事で可能になるに違いない・・・。

以上、自己満足でした。