１枚の画像でロールオーバーを表現する方法

リンクされた画像をクリックする時に（マウスが上に来た時に）

画像が切り替わった（色や凹み感）事がありますよね。

それをロールオーバー効果と言います。

どういう仕組みかと言いますと、

・マウスが上に来てない時の画像
・マウスが上に来た時の画像（クリックされる前）

の２パターンが別々の画像として用意されています。

今回は、それを１枚の画像にして
位置移動だけで切り替える方法をピックアップしたいと思います。

参考にしたサイト様
http://www.1uphp.com/con2/over/over3.html

このように上記のサイトと同様に作ったものの、
プレビューでは何の問題もありませんでしたが、
サーバーにあげたところ

マウスが上に来た時に、透過してしまって

？？？

となりました。

JPGじゃなく、PNGで作成したのが悪いのでしょうか？

形は円形で　円形以外の部分は確かに透明にしてあります。
そしてbodyの背景を見せて円形が浮いているかのように見せたかったのですが・・・
でも円形は不透明度100％です。。。

ブラウザごとに確認しましたが、すべてのブラウザでアウトでした。

JPGでも、gifでも試してみました。

どちらも駄目、背景が透けて見えてしまっています。

今度は、このリンクバナーのある部分の背景を白に設定しました。

駄目でした、薄っすら透けてます～＞＜

ということは、画像が悪いのではなくて
CSSか何か悪いという事になります。。。。

実は、このリンクバナーにはアンカーリンクを付けていまして
ページ内の設定したリンクにページを移動させてくれるというものなのですが

その時に、瞬間移動するのは面白く無いので

スムーズにスクロールする記述をしています。

参考にしたサイト様
http://kyasper.com/jquery-tips/
http://klutche.org/archives/536/
http://makasete-web.net/gototop-scroll

もしかしたら、このせい？？

この分野は詳しくないので自分で記述を修正できませんでした・・・
丸ごと記述消したりして確かめましたが
よくわかりませんでした・・・＾＾；

ロールオーバーは半透明化する仕様なのかもしれません。

そこで、調べたところ
同じように半透明化させないようにしたい方が質問していましたので
http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q11107501676

以下引用

マウスオーバーで画像を半透明化するようにしていて、一部だけ除外する方法
今、ホームページを作っていて、
CSSに

「
a:hover img {
opacity: 0.5;
filter:progid:DXImageTransform.Microsoft.Alpha(Style=3,Opacity=80,FinishOpacity=80);
}
」

と入力して、リンク画像にマウスオーバーすると、画像が半透明になるようにしています。
そこで質問です。
ひとつの画像だけ、半透明化させないようにしたいのです。
どうすれば良いのでしょうか。
ご回答よろしくお願いします。

 

 

>doraqfujicoさん

＞ひとつの画像だけ、半透明化させないようにしたいのです。

class指定したらいいです。

a.hoge:hover img {
opacity: 1.0;
filter:progid:DXImageTransform.Microsoft.Alpha(Style=0,Opacity=100,FinishOpacity=100);
}

http://www.tagindex.com/stylesheet/basic/format2.html

こちらを参考に、リンクバナーのCSSに追記しました。

ソース

<a class="hoge"><img alt="" /></a>

CSS

a.hoge:hover img {
opacity: 1.0;
filter:progid:DXImageTransform.Microsoft.Alpha(Style=0,Opacity=100,FinishOpacity=100);
}

半透明化する仕様に、強制的にやめさせているような気がしますが

とりあえずは、半透明化はなくなりました！

めでたし、めでたし？