cssで画像をプリロードする方法(改

このエントリーをはてなブックマークに追加

以前このblogで取り上げたcssのみで画像をプリロードする方法ですが、実は画像のプリロードが全くできてませんでした(汗

参考にされた方すみませんでした。
また、記事のアイデア元であるPHPSPOT(Specere Blogs)の方法でもプリロードはできません。キャッシュフォルダを見ながら検証いたしました。(IE6)

ともにカスケーディングの仕様を誤解しての発想だったようです。
cssプロパティはカスケーディング(スタイルの上書きの事です)を行いますがブラウザが解釈するのは最後のプロパティです。ので、同じプロパティを複数カスケーディングしても有効になるのは最後のみでした。

さてリベンジということでcssで画像をプリロードする方法(改をご紹介します。

cssで画像をプリロードする方法(改

(x)htmlに記述するコード

<img src="読み込みたい画像" width="0" height="0" class="preload" />
<img src="読み込みたい画像" width="0" height="0" class="preload" />
<img src="読み込みたい画像" width="0" height="0" class="preload" />
<img src="読み込みたい画像" width="0" height="0" class="preload" />

cssに記述するコード

img.preload{
	display:none;
}

さんぷる

img要素で画像を読み込みそれをcssで非表示にしてきます。また、cssがoffのユーザーも考慮してwidth属性とheight属性にともに0を入れています。

これで簡単にプリロードはできますが
これではありきたりだし、ソースが汚くなるのでもうひとつ。(こちらがお勧めです。)

cssで画像をプリロードする方法(改 2

(x)htmlに記述するコード

<p class="button"><a href="#">sample</a></p>

cssに記述するコード

p.button{
background:url("img01/a_img.gif") no-repeat;
}
p.button a{
display:block;
width:200px;
height:50px;
background:url("img01/b_img.gif");
text-indent:-9999px;
}
p.button a:hover{
background:none;
}

さんぷる

つまり事前に読み込んでいた画像をマウスオーバーの際に表示するのではなく、
2つの画像を重ねておいてマウスオーバーの際に上の画像を消すというやり方です。

このやり方だとインターネットオプションでインターネット一時ファイルの設定をページを表示するごとに確認するとしている方(つまりプリロードできない環境の方)でもちらつきなくロールオーバー処理を行う事ができます。

関連エントリー

一番簡単な画像置換の方法-imageReplace.js-
画像置換でメニューを作る
画像置換
BIR-もうひとつの画像置換

スポンサードリンク

«戻るボタンの実装方法について | メイン | 単一の要素に複数のclassを設定する方法»

このエントリーのトラックバックURL
http://blog.webcreativepark.net/cgi/mt/mt-bt.cgi/1424
トラックバック内容
» preloader.js - Ajax Image Preloader from BLOG × WORLD ENDING
画像をプリロードするにはDreamweaverのMM_preload()のようなJavaScriptを使った昔ながらの方法があったりCSSを使った方法が...
コメント

http://kikky.net/pc/form_type.html

BUTTONタグがあるのでclass、idにはbuttonという名称は使わないほうがいいと思います。

投稿者:hama | 2007年8月 9日 21:00

はじめまして、検索でたどり着いた通りすがりです。
参考になりました ;-)

投稿者:piro | 2007年11月11日 10:56
コメントを投稿