画像ボタンをキラキラさせるには

質問

こんばんは。
ホームページ制作についての質問です。

画像ボタンにカーソルを乗せたり、クリックしたりしたときに、
ボタン周りにキラキラが出るようにしたいと思っています。

数日かけて、いろいろ検索して、多くの参考サイトを見ましたが、
結局答えには辿りつけませんでしたので、
ここで質問させてもらおうと思いました。

ここが自分のページです。
http://oto.bz/Oto%20no%20Omise.html

テーブルのセルの中に赤と青のボタンがあり、
押すと右上にカートが出ると思います。
このボタンにオーバーロールを使っており、
マウスを乗せたりクリックしたりで、多少変わります。
本当はこれに、キラキラの効果を加えたいのですが、
うまくできずにいます。

これがテスト用に作ったページです。
http://oto.bz/test.html

赤い方のボタンにマウスカーソルを乗せると、
少しキラキラとなり、クリックすると、
更にたくさんキラキラとなりますが、
これは、赤いボタンの周りにキラキラをつけた
png画像を配置しただけなので、
赤いボタン自体は縮小されるし、
何がやりたいのかよく分からない状態になっています。

自分がやりたいのは、
マウスカーソルを置いたときと、クリックしたとき、
ボタンのキラキラ部分だけを、
セルの外にはみ出させて表現することです。
赤いボタン自体は不変にして、外にキラキラを散りばめる、
こういったことはできるでしょうか？

もし不可能な場合は、無理だと分かるだけでもすっきりしますので、
何かご存知の方がいましたら、情報をいただけないでしょうか。

回答No.1

webuser · ベストアンサー

もし不可能な場合は、無理だと分かるだけでもすっきりしますので、何かご存知の方がいましたら、情報をいただけないでしょうか。

>セルの外にはみ出させて表現することです。

セルという概念に拘るなら、恐らく無理であろうと思います。

セルの外側とキラキラを含めたエリア全体を一つの何かしらの部品で作れば出来ると思います。

一番簡単なのは、星無しの画像と星有りの画像をマウスオンで切り替える事です。
既にやっていますよね？
その範囲を拡大させるだけです。

今は

■■■■
■■■■
■■■■

　↓

☆□□□□☆
□■■■■□
□■■■■□
□■■■■□
☆□□□□☆

ですよね。

大きさも範囲も違う画像を入れ替えても、縮小されて範囲も変わらずで意味不明な事になってます。
周りを含めると下の様な感じ。

□□□□□□
□■■■■□
□■■■■□
□■■■■□
□□□□□□

　↓

□□□□□□
□☆□□☆□
□□■■□□
□☆□□☆□
□□□□□□

そうではなく、枠を組み直して周りの縁も全部画像にするんです。

□□□□□□
□■■■■□
□■■■■□
□■■■■□
□□□□□□

　↓

☆□□□□☆
□■■■■□
□■■■■□
□■■■■□
☆□□□□☆

そうすれば達成できます。

それ以上となると、
ボタンと周りの枠ではなく、画面全体をアニメ的にしてしまえば、キラキラが２枚の切り替えというショボイものではなく、本当にキラキラします。
その究極の技がフラッシュコンテンツです。

でも、フラッシュコンテンツは対応していない端末があるので、最近あまり誰も使っていません。

JavaScriptをゴリゴリ書きまくって作るか、jQueryなどを使うかですね。

お礼

いろいろ試しましたが、結局、
テーブルがないとページ自体が成り立たない、との結論に達しました。
JavaScriptの本を買いました。
PDFですが。
http://book.impress.co.jp/books/1113101090.php
これをじっくり読んで、何かできないか、考えたいと思います。

補足

ご回答ありがとうございます。

セルを使っている限り無理なんですね。
今からテーブルを使わずに試してみます。
達成できるまで、少し時間をいただければと思います。