filterとopacityを使ってみる2 クイズ こんなんつくってみましたけど…

filterとopacityを使って、ラクチンhoverはグッドです。はは、なんとかうまくいきましたですぅ。これらのプロパティは、透過度を決めるものなので、透ければ下が見えるというものです。ということは、ボックスを重ねてやって、下のボックスのほうに画像を背景で貼り付けておけば、上の画像を透けさせたときのみ、下の画像が見えるのではないかなぁと思い、実験です。

ちょっとクイズを作ってみました。下のボックスの背景画像に解答が書いてあります。上に乗っかってるボックスには、選択肢が書いてあります。どうでしょう。

XHTML

<p>わたしはだれ?</p>
<p>以下の三択から答えてみてくらさい!答えにマウスをのせてみてね。</p>
<div class="transout" id="fst"><div class="transin"><a href="#"><img src="img/a1_n.gif"width="200" height="100" alt="" /></a></div></div>
<div class="transout" id="sec"><div class="transin"><a href="#"><img src="img/a2_n.gif" width="200" height="100" alt="" /></a></div></div>
<div class="transout" id="thd"><div class="transin"><a href="#"><img src="img/a3_n.gif" width="200" height="100" alt="" /></a></div></div>

CSS

div.transout {
	margin-bottom:10px;
	width:200px;
}
div.transin a {
	text-decoration:none;
	opacity:1;
}
div.transin a img{
	width:100%;
	filter:alpha(opacity=100);
	border:none;
}
div.transin a:hover {
	opacity:0;
}
div.transin a:hover img{
	filter: alpha(opacity=0);
}
div#fst {
	background-image:url(img/a1_on.gif);
}
div#sec {
	background-image:url(img/a2_on.gif);
}
div#thd {
	background-image:url(img/a3_on.gif);
}

サンプルはこちら

なんか、もっと普通に実装できそうだけど、おもしろいですぅ。
たのしくなってきた見習いです。

追記 悲しくなる現実に気づきました。

おまけのクイズですが、下のボックスがhoverのときのみ透けて見えるというのは、面白いと思ったのですが、よく考えると、これって、hoverのときに、背景画像を別のを読み込めばいいだけで、そしたらボックスを2個も重ねることないということにようやく気づきました。一生懸命考えたけど、「休むに似たり」でした。とほほ。