PERUTORO -小樽の新米ウェブデザイナーのブログ-

便利だったので、メモ。まぁIE6はそろそろ消えそうな雰囲気もありますが…覚えておくに越したことはないかと。

下記にhtmlの例。

<li class="sample"><a href="#">サンプル</a></li>

下記にcssの例。

li a{
	display: block;
	width: 100px;
	height: 70px;
	text-indent: -9999px;
}
li.sample a {
	background: url(sample.png);
}
li.sample a:hover {
	background: url(sample_on.png);
}
* html li.sample a {
	filter:progid:DXImageTransform.
Microsoft.AlphaImageLoader(src='sample.png',sizingMethod='scale');
	background: none;
}
* html li.sample a:hover {
	filter:progid:DXImageTransform.
Microsoft.AlphaImageLoader(src='sample_on.png',sizingMethod='scale');
	background: none;
}

以上です。

サンプル作ってみました。　サンプルはこちらから

DirectX filter AlphaImageLoader っていう物らしいです。こんな方法があったんだなー…まだまだ知らない事だらけです。

関連する投稿

• デザインリニューアルと、W3C準拠しよう。 (0)
• IE6で文字が繰り返されるバグ。 (0)
• css3で画像の半透明化。IEも可。 (0)
• 文字が折り返さず、枠をはみ出て表示される対処法。 (0)
• IEでのバグを修正。そろそろ雪らしいです。 (0)