ウェブサイトの入り口にアニメーション処理を加えてみた。→
■画像にマウスポインタを乗せると、「尼寺」が発光します。
通常だと、JavaScriptの「onMouseOver」を使用するんでしょうが、
ウチのサイトに来る方って、ディープな方が結構多いので、
ブラウザのJavaScriptを敢えてオフにしてたりするんですよねー。
ちうわけで、cssのみで代用してみることにした次第です。
――３日目のネタも、およそ役者らしくないネタでござるね。
具体的に書くと、こんな感じ。
a {
background: url('xxx.gif') no-repeat;
display: block;
height: 40px;
overflow: hidden;
width: 200px;
}
a:hover {
background-position: 0 -40px;
}
使用する画像のサイズは200x80で、200x40の画像が
縦に２枚連結されている。
で、２枚の内、上半分の画像は静止画で、下半分の画像は動画。
通常は静止画部分が見えているが、ポインタが画像の上に乗ると、
画像の位置が上に40移動し、動画部分が現れる、という仕組み。
要は、200x80の大きさの絵を、200x40の「窓」から覗いているイメージ。
よし、こんなネタなら、毎日続けられる気がしてきたぞ。(*ﾟ∀ﾟ)ﾉ
