基本の設定方法

私の元ネタとなったサイトはこちら。
unou+

画像にオンマウスすると、ストライプな画像が、昔の散髪屋のくるくる回る看板のように（すみません、なんていう表現をするのだろう、私は・・・）スライドします。
このサイトはフルフラッシュなんですが、これってアニメーションgif使えばCSSだけでいけそうじゃない？と思いました。
そんなことをやっていたサイトをどこかで見たような気もしますが・・・。

まずはサンプルをご覧ください。
下の写真の上にカーソルを合わせてみてください。

今回のサンプルは:hover擬似要素をimgに対して指定するので、それに対応しているモダンブラウザでないと適用されません。
WindowsのFirefox2.0.0.3、Opera9.1、Netscape7.1で動作を確認しました。
IE6.0は対応しておりません。

XHTMLは以下の通り

<img src="image.jpg" alt="" class="slide" />

CSSは以下の通り

img.slide{
padding:5px;
border:1px solid #999;
background:#fff;
}

img.slide:hover{
background:url(over.gif);
}

「.slide」を指定しているのは、imgに指定しまうと全てのimgにこれが適用されてしまうからです。
さらに、LightboxやhighslideのようなAjaxを使えば、素敵に写真を拡大することができます。
Lightboxやhighslideは海外のサイトにて配布されていますが、日本のサイトでも多く紹介していますので導入しやすいと思います。検索して調べてみてください。ここでは割愛します。

こんな使い方も

:hoverを使えば、以下のような使い方も。
テキスト部分にマウスを持ってみてきてください。オンマウス時にまわりに枠にスライド画像が表示されます。

XHTMLは以下の通り

<div class="slide">
<p>
コメント
</p>
</div>

CSSは以下の通り

div.slide{
padding:5px;
border:1px solid #999;
background:#fff;
}

div.slide:hover{
background:url(slide.gif);
}

div.slide p{
margin:0;
padding:5px;
background:#fff;
}

IE6にも適応させるには？

IE6でもaタグになら、:hoverを適用させることができます。
これを利用すれば、アンカーをはった画像になら適用できそうです。
ぱっと思いつくコードを書いてみました。

XHTMLは以下の通り

<a href="image.jpg" class="slide">
<img src="image.jpg" alt="" class="slide" />
</a>

CSSは以下の通り

img{
border:0;
vertical-align:bottom;
}

a.slide{
padding:5px;
border:1px solid #999;
background:#fff;
}

a.slide:hover{
padding:5px;
background:url(slide.gif);
}

先ほどと同様に「.slide」を指定しているのは、aタグに指定しまうと全てのアンカーにこれが適用されてしまうからです。

しかしながら、ここで問題が！！！
モダンブラウザでは、このようにaタグに指定した場合、うまくいかないんです。
以下の画像のように一行分しか高さがありません。

恐らく、aタグがブロック要素になっていないからだと思います。IEではそのあたり拡張してくれるのでうまく表示できていたのだと思います。
なので、a.slideに赤の部分を追加。

a.slide{
padding:5px;
border:1px solid #999;
background:#fff;
display:block;
width:120px;
}

widthを指定しないと、びよ～んと横までブロック要素が伸びてしまいますので注意。
これでうまくいきました。

ご自由にお使いください

サンプルで使用した画像と、それを作ったPhotoshopのPSDファイルを配布いたします。
ご自由にお使いください。カスタマイズ自由ですので色とかストライプの太さとか変えるとまた違った雰囲気になると思います。
Photoshopのバージョンは6です。
ImageReaderを起動させれば、アニメーションgifも作れると思います。
アニメーションgifは右クリックして「名前を付けて画像を保存」でタウンロードしてください。
PSDファイルはアイコンをクリックして、ファイルを保存してください。

スライド用アニメーションgif→
PSDファイル→