より大きな写真にリンクしているサムネイルがある時に、マウスオーバーすると拡大マークが出てくるようにしてみました。
IDEA*IDEAさんで紹介されていた、画像にマウスオーバーするとメガネアイコンなんかを表示してくれる『imagelink.js』 を試したものです。
方法としては、
１．imagelink.jsを作成したサイト、Css Globeさんの説明ページStyle Your Image Linksより、ダウンロード。
２．とりあえずsinglestyleでやってみる。singlestyleのなかにあるimagelink.jsを、$MTBlogURL$の位置、つまりindex.htmlのある位置にアップロード。
３．zoom.gifをmt-staticの中のimagesフォルダにアップロード。
４．headタグに、
<script type="text/javascript" src="<$MTBlogURL$>imagelink.js"></script>
を加える。
５．以下のスクリプトの"***/mt-static/images/zoom.gif"のところを、"zoom.gif"をアップロードしたアドレスに替えて、スタイルシートに、
.imageOver{
background:url(***/mt-static/images/zoom.gif) no-repeat 50% 50%;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5; }
を加える。
６．これで、再構築してみる。
例えば、写真blogにある写真で試してみると、（マウスオーバーしてみてください）
このようにマウスオーバーしたときに表示される。さりげない感じが、なかなかいいですね。
コメントする