アメブロのフリースペースにロールオーバー画像を設置しようとしたらできなかった。どうやら、onmouseoverなどが禁止タグに設定されているようだ。
そこでCSSだけを使ってロールオーバー効果を実現する方法を紹介しよう。
まず、HTML(フリースペース)部の記述だが、以下のようにリンクだけを設置しておく。
<div class="任意のクラス名"><a href="リンク先のURL"></a>
続いてCSSの記述だが、要はaタグをdisplay:blockでブロック要素として指定し、その背景に画像を指定。a:hoverタグに別の背景画像を指定することで、ロールオーバー効果を演出している。
.指定したクラス名 a {
width: 画像の横サイズ;
height: 画像の縦サイズ;
background: url(元の画像のURL) no-repeat;
}
.指定したクラス名 a:hover {
background: url(切替える画像のURL) no-repeat;
}
上記の例では2枚の画像を利用したが、元の画像と切替え後の画像を1枚に連結しておき、background-positionで、半分ずつ切替えて表示するという方法でも良いだろう。
背景画像を切替えているだけなので、当然ながらHTMLのリンク内にテキストを記述すれば、それを表示させることも可能だ。