リンク画像のロールオーバー

リンク付き画像の簡単なロールオーバーの方法を紹介したいと思います。

今回はjQueryではなくて、CSSで簡単に実現する方法です。

 

※ この記事は以下の記事を元にして、実際にJimdoで動くことを確認しながら書いています。

 

超シンプル!hover画像作る必要ナシ、CSSだけで、画像をロールオーバー!

 

複数の画像を用意して切替える方法も一般的ですが、今回は透過度を変えるだけです。

こんな感じになります↓

woodpecker-mini

 

まず、画像を用意します。

画像倉庫をつくって画像を使い回す」を参考に、フェードインの対象とする画像をアップロードしてください。

 

画像を用意したら、実際に画像をフェードイン表示したい箇所にウィジェットを貼り付けます。

「新規項目を追加」→「ウィジェット/HTML」を選択して、ウィジェットに次のようなコードを書き込みます。

<a href="http://liyuanslab.jimdo.com/">
  <img class="ro-img" src="http://u.jimdo.com/xxxxxxxxxxx/std/image.jpg" alt="woodpecker-mini">
</a>

<img>タグには先ほど用意した画像を指定しています。

そして、<img>タグにはクラス名を指定しています。

class="ro-img" がクラス名です。後でこのクラスに対してロールオーバーを指定します。

複数の画像にロールオーバーしたい場合には、すべての画像の<img>タグに同じクラス名を付けてください。

 

最後にCSSのコードを記述します。

「設定」→「ヘッダー部分を編集」を開き、以下のコードを貼り付けます。

<style type="text/css">
/*<![CDATA[*/
<!--
a:hover img.ro-img
{
  opacity:0.7;
  filter:alpha(opacity=70);
  -ms-filter: "alpha( opacity=70 )";
}
-->
/*]]>*/
</style>

a:hover img.ro-imgの部分で、先ほどの画像にマウスポインタが重なったときを意味しています。

クラス".ro-img"で指定した部分の透過度を70%にしています。

 

以上です。