javascriptからCSSに変えてとても軽量化したいプラン

いままではこんな感じのボタンで、マウスカーソル重なったら右の画像を読み込むor先に読み込んどくっていうのをjavascriptでやってたわけだが、今のブラウザの機能とか踏まえると常識的に考えて無駄なのでCSS使って実装する。

具体的には、

1. divでピクセル指定したボックスにこのキュベレイみたいな画像を背景で置く。


2. 左側に文字で名前置く。クリック範囲が狭い問題は文字余白とかで増やす。


3. 文字の背景に、マウス乗ってるときと乗ってないときで切り替わるグレー背景画像をアルファチャンネルで透過させたPNGにして置く。

利点は、

• ファイル転送量が超減る=読み込み速い
• 背景差し替えだけで済むので更新が超ラク


• 文字ミスも楽々修正
• ソースが綺麗になり見やすい

難点は、

• 文字を変えれない(前はマウスホバーで日本語に切り替えてた)


• PNGアルファチャンネル透過だと乗算合成とか使えないのであんまりうつくしくない

と、ここまで書いてからテキストを縦書きにするのはIE7だけが微妙な対応だったと思い出してどうしたもんかな、と思い至った。


追記：

ということだったんだがガサ入れしたらば、IE7のみが独自拡張で縦書きサポートしてて、それ以外のブラウザは一切未対応のようだった。

こりゃ諦めて文字部分も画像にするしかないんかなぁ。


追記：

日本語なら横幅詰めてそれっぽくはできるんだが、こと英字については字を横に回転させることはできないのでムリくせぇ。

ので無難にCSSロールオーバーに落ち着いた。