tianlang @ ウィキ
マウスオーバーで画像をフェード交換
最終更新：
tianlang
-
view
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>設置サンプル</title>
<link rel="stylesheet" href="lib/global.css" type="text/css" />
<!-- JS -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="lib/jquery/jquery.easing.1.3.js" type="text/javascript"></script>
<script type="text/javascript">
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");
});
</script>
<!-- CSS -->
<style type="text/css">
/* 背景画像指定 */
#header { margin:0; padding:0; text-indent:-9999px; width:498px; height:118px; position:relative; margin-left:-1em; background:url("img/ajax/awesomeheader.png") no-repeat; }
#header a { position:absolute; top:0; left:0; width:498px; height:118px; display:block; border:0; background:transparent; overflow:hidden; }
/* マウスオーバー時に背景画像の位置を変更 */
#header .fake-hover { margin:0; padding:0; width:498px; height:118px; display:block; position:absolute; top:0; left:0; background:url("img/ajax/awesomeheader.png") no-repeat 0 -118px; }
</style>
</head>
<body>
<div id="wrap">
<h1>設置サンプル</h1>
<p>参照：<a href='http://swedishfika.com/2008/03/04/creating-a-fading-header/'>Creating a fading header</a></p>
<p>▼ロゴにマウスオーバーすると、ロゴがフェードします。</p>
<!-- CODE -->
<div id="header"><a href="#">PHP & JavaScript Room</a></div>
<!-- CODE / -->
</div> </body>
</html>
