ページが読み込まれた段階では、薄くなった状態で表示され
マウスオーバーで透明度を0にします。
この動作を簡単に実現するために、jQueryを使用します。
サンプル
コード
[javascript]
$(function(){
$(“#target_image”).fadeTo(0,0.2);
$(“#target_image”).hover(
function(){
$(this).stop().fadeTo(“fast”,1.0);
},
function(){
$(this).stop().fadeTo(“fast”,0.2);
}
);
});
[/javascript]
2行目
IDがtarget_imageの要素をfadeTo関数で透明度を0.2にします。
3行目
IDがtarget_imageの要素にマウスオーバーした時の動作を定義します。
マウスオーバーとマウスアウトした時の動作はhover関数を使用します。
hover(マウスオーバーの動作,マウスアウトの動作)
マウスオーバー時に透明度0に、マウスアウト時に透明度を0.2に戻しています。