2014年6月25日水曜日

Freeway 画像ロールオーバーは結局どの方法が良いのか?

画像を使ったロールオーバーですが、色々な方法があります。
とにかく簡単で、分かり易く、不具合のないロールオーバーの方法はどれなのか色々調べてみました。
結論として、javascriptを使った方法に決めました。
参考にしたサイトはこちら

1.方法を簡単に説明すると、まずサイトからjavascriptをダウンロードしサーバーに配置します。
2.ロールオーバー用の画像を2枚用意します。片方の画像には末尾に_overを加えます。
(例えば pre.pngとpre_over.ongの2枚をサーバーに配置します)

次に、ページのhead内にスクリプトの場所を記述します。

※?type=_onに変更した方が良いみたいです)

body内にこのように記述します

これだけで実装出来るのですが、ボタンを押した時、読み込みに時間がかかる場合、画像が非表示になる減少が起きました。(モバイルで特に)
そこで、id="pre"に対してCSSでバックグランドを指定する事で回避出来ました。

0 件のコメント:

コメントを投稿