ロールオーバーの方法
かなり以前に使った方法だけど、一応もう忘備しておきます。
①最初期にやってたこと→画像を2つ用意してjavascriptでロールオーバー制御。
<div style=”text-align: center;”><a onclick=”window.open(‘https://okinawacbs.sakura.ne.jp/inquiry/postmail.html’,’お問い合わせフォーム’,’scrollbars=yes,resizable=yes,width=680,height=800,left=’+(screen.availWidth/2-340)+’,top=’+(screen.availHeight/2-300)+”);return false;” href=”https://okinawacbs.sakura.ne.jp/inquiry/postmail.html”><img title=”お問い合わせフォーム” onmouseover=”this.src=’http://okinawacbs.com/wp-content/uploads/2012/12/contactme-pink.jpg’;” onmouseout=”this.src=’http://okinawacbs.com/wp-content/uploads/2012/12/contactme-orange.jpg’;” alt=”お問い合わせフォーム” src=”http://okinawacbs.com/wp-content/uploads/2012/12/contactme-orange.jpg” /></a></div>
[/javascript]上のようなもの。
②その次にやったこと。CSS Sprites。
こういう画像を用意して、
ファイルのHTML部分は
[html]<p class=”button”>
<a href=”http://shop-kyobunkwan.com/<?php echo isbn13to10($value); ?>.html”>イーショップでこの商品を買う</a>
</p>
んで、buttonクラスのCSSを下記のように。
[css]p.button{
text-align: center;
font-weight:bold;
padding: 10px 0;
}
p.button a{
display:block;
line-height: 32px;
background: #ffffff url(images/button.png) no-repeat;
margin: 0 -20px;
}
p.button a{color:#0000cc;}
p.button a:hover{color:#ffffff;}
p.button a:hover{
cursor:pointer;
background-position: 0 -32px;
}
背景でなく文字の色が変わるというちょっと特殊なやり方だけど、画像の下の方の色を変えておけば背景色も変わります。
今思えばかなり複雑なことをやったもんだ。
③CSSだけで制御
[css]<span style=”color: #ff0000;”>a:hover img{
opacity:0.8;
filter:alpha(opacity=80);
-ms-filter: “alpha( opacity=80 )”;
}</span>
これだけｗｗｗ
つまり、これは色を変えるロールオーバーでなく、全てのリンク付き画像がロールオーバーで半透明になり、
まるで、ロールオーバー画像を用意した感じになるというもの。
上のソースの例でいうと、
0.8や80というのは、不透明度80%、という意味になるので、
もっと薄くしたい場合は、0.6 、60 等に変更する事でカスタマイズ可能。
もし特定の画像を半透明にするためクラスを付与したい場合、例えばクラス名を仮に「transimg」とすると、
[css]<span style=”color: #ff0000;”>a:hover img.transimg{
opacity:0.8;
filter:alpha(opacity=80);
-ms-filter: “alpha( opacity=80 )”;
}</span>
としておけばよい。結構色んな所で使われているから、これからはこれで行こうかな。