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個も重ねることないということにようやく気づきました。一生懸命考えたけど、「休むに似たり」でした。とほほ。
2011年11月20日1:01 AM| カテゴリー: HTMLとCSSのコード,見習い奮闘記| コメント (0)