あんまり見ないけどこれは流行りそう

js

偶然みつけた海外サイトが面白いことやってた。
日本のページじゃあんまり見ないからすげー！って思って分析してみた。
なんとなくやり方がわかったので自分のページにつける。
上下の広告は仕様です。
以下URL。

http://wanti111.me.land.to/switz/

どう？
あんま見ないでしょ。
flashじゃないよ！flash嫌いだから。
で、元ネタはこちら。

http://bitsamppixels.com/

さすがIT先進国。
しかもハタチだとよ（笑
では解説でーす。

1、jquery.jsを読み込ませ。

2、これも読み込ませ。

var Header = {
addFade : function(selector){
   $("<span class=\"fake-hover\"></span>").css("display","none").prependTo($(selector));
   $(selector+" a").bind("mouseenter",function(){
   $(selector+" .fake-hover").fadeIn("slow");
  });
  $(selector+" a").bind("mouseleave",function(){
    $(selector+" .fake-hover").fadeOut("slow");
  });
}
};
$(function(){
  Header.addFade("#header");
});

3、cssはこちらで。

#header {
margin: 0;
padding: 0;
width: 400px;
height: 225px;
position: relative;
margin-left: -0.4em;
background: url(footprint.jpg) no-repeat ;
}

#header a {
position: absolute; 
top: 0; 
left: 0;
width: 400px;
height: 225px;
display: block;
border: 0;
background: transparent;
overflow: hidden;
}

#header .fake-hover {
margin: 0;
padding: 0;
width: 400px;
height: 225px;
display: block;
position: absolute;
top: 0;
left: 0;
background: url(footprint.jpg) no-repeat 0 -240px;
}

4、html側だお（タグ打ち込むと日記が勝手にリンク張るので最初の"<"は全角にしてあります。半角に直してね）

<h1 id="header">
<a href="#">Awesome header</a>
</h1>

解説。

ちょっとまえに話題になったcss spriteとjqueryでやってる。
一枚画像で高さを半分ずつ指定して見せてまーす。
こういうこと

http://wanti111.me.land.to/switz/footprint.jpg

元ネタのサンプルそのまんまだとieが変なことしてたんで少し修正しました。
もしそのままでいけてたら僕のミスです。
ソースはもろパクリなので芸がないけど見本を提供ということで見逃してほしいお！
やっぱ海の向こうの人は発想力あるなー。