2009/08/25 (Tue) ロール イズ オーバー マウス イズ オーバー

サイトのＴＯＰのデザインを変える。

最初そのつもりはなかったけど、マウスを画像にのっけると画像が切り替わる、っていうのがあるのでやってみる事に。

画像を作る時は優柔不断からか何種類もパターン違いのを作成するので、それが活用できていいな、っていう貧乏根性に後押しされてるだけな思いつきで。

とりあえずやり方をググる。

サックリと出てきた方法でやる。

ヽ(´▽｀)/ おーでけたー

だが、しかし問題が。

これはjavascriptを使用た方法。

(-ω-) 普段自分切ってるわ・・・・・

という事で他の方法を探す。

CSSでもいけるよう。

だが、色々と記述方法がある模様。

とりあえず試す。
が、うまくいかない事それなり。
リファレンスサイトでは動作しているのに。



うまくいかなかった一例。

最初に表示される画像とマウスオーバーした時の画像を二枚用意するのではなく、コレを横または縦に繋げて一枚にして、表示させる領域を指定して画像が切り替わったように見せるというやつ。



一旦投げるけど、気になったのでまた試す。



一応うまくいったもの。

HTMLにダミーの透明画像を指定。
CSSで切り替え前、オンマウス時の切り替え後画像を指定。

うまくいくことはいくけれども、Operaだと切り替え後の画像が最初表示されない。
一旦マウス放して、もう一回のせると画像が表示される。



これでは意味なし・・・・・。

なので他のものを。



なんとかなったもの。

HTMLで切り替え前の画像を指定。
CSSで切り替え後の画像を指定するようにするもの。

リファレンス通りだと切り替え後の画像が横方向にリピートされてしまう。

no-repeat

を加えてみる。

画像そのものが表示されなくなる。

ヽ(`Д´)ﾉ ウガーッ

っとなった後、画像の横幅と高さを元々指定してあるところと別の箇所にも加えてみる。

うまくいく。


FirefoxとChromeでも一応チェック。
ちゃんとうまくいく。


(-"-) ホントに面倒くさいわ～