人気ブログランキング | 話題のタグを見る
==教えることは自分育て==
<< 記事タイトルの背景に色をつけ、... コメント欄の変更 >>

画像の拡大表示(ロールオーバー)
画像の上にマウスを載せてみてください。(オンマウス)


このスキルは「ぽっとの陽だまり研究室」さん提供です。
もともとは1枚の画像の拡大表示として案内されてます。
2枚の画像を使って同じサイズにすると、あたかもロールオーバーのようになります。
しかし、ジャバスクリプトではないのですよ。
詳しくは→「ぽっとの陽だまり研究室」のサイトへ

<投稿欄>
画像は参考例です。ご自分の画像に変えてください。

<div class="popup"><a href="http://otomi7771.exblog.jp/">
<!- 始めに表示しておく小さな画像 -><img src="http://pds.exblog.jp/pds/1/200705/21/21/b0063421_0411275.jpg" class="small"><!- マウスを乗せて大きく表示する画像 -><img src="http://pds.exblog.jp/pds/1/200705/21/21/b0063421_0413578.jpg" class="zoom" width=360 height=240 alt="マリンワールドのイルカショーです。"></a></div>


<CSS編集>

/*ロールオーバー*/
.popup a:link img.zoom,
.popup a:visited img.zoom,
.popup a:active img.zoom,
.popup a:focus img.zoom{
display:none;
border-style:none;
text-decoration:none;
}

.popup a:hover{background-color:transparent;}

.popup a:hover img.zoom{
border-style:none;
display:block;
text-decoration:none;
}

.popup a:link img.small,
.popup a:visited img.small,
.popup a:active img.small,
.popup a:focus img.zoom{
border-style:none;
display:block;
text-decoration:none;
}
.popup a:hover img.small{
border-style:none;
display:none;
text-decoration:none;
}

by otomi7771 | 2007-05-13 22:39 | ├ロールオーバー |TOPに戻る
<< 記事タイトルの背景に色をつけ、... コメント欄の変更 >>