2014年6月25日水曜日

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

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

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

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

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

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

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

2014年6月12日木曜日

Freeway ローディングマークを挿入

久しぶりに、Freewayというか、htmlに関する投稿です。
本日はローディングマークの挿入です。ところでローディングマークとは何なのか?
サイトを閲覧している際に、大きな画像を読み込んでいるときに表れる、くるくると回っている風車の事ですね。
↓コレ


ネット回線が細くて、画像の読み込みに時間がかかるとフリーズしてるのか??と不安になりますよね。そんな時は、「読み込んでるよー!」と教えてあげた方がいいですよね。

導入の方法は、挿入したいブロック要素のクラスを class="Reading"と指定します。
続いて、CSSには
.Reading {
  width:100%;
  background-image:url("../Resources/ajax-loader.gif");
  background-repeat:no-repeat;
  background-position: center center;
}
と記述します。
最後に、ローディングマークの画像を、サーバー内のResourcesに収納します。
色々なローディングマークがネット上に配布されているので、お好みのモノを使ってみて下さい。