roll over

レシピその１

cssソース

		
/*初期化*/
*{
	margin: 0;
	padding: 0;
	list-style-type: none;
}

/*演習１*/

.header{
	background:#222222 url(bg.png) repeat-x 0 100%;
	padding:40px 0 0 42px;
	*zoom:1; /* ie */
	border-bottom:8px solid #91b280;
}
.menu{
	height:38px;
}
.menu li{
	list-style-type:none;
	float:left;
	padding:0 0 0 8px;
}
.menu li a{
	float:left;
}
.menu li a img{
	width:161px;
	height:38px;
	border:none;
}

htmlソース

				

                    
    
                        
  • home
    • 
                        
  • Prodacts
    • 
                        
  • Company
    •

ulの親要素にクラスheaderをもったdivを作成すること。

復習

下記のリストされている文字列の○○の部分をテキストボックスに入力した文字列に置換してください。

文字を入力してください。
  • ここは○○
  • ここも○○
  • これも○○
  • こっちも○○

問題ソース

	


    
    

        
  • ここは○○
    • 
        
  • ここも○○
    • 
        
  • これも○○
    • 
        
  • こっちも○○
    •

→→→問題ファイル→→.zip DL

発展形

変更ポイント

	
			//変更ポイント１正規表現による置換
			var src_on = src_off.replace(/^(.+)_off(\.[^\.]+)$/,'$1_on$2');

			//変更ポイント２フーバーイベントbind使用
			a.bind('mouseenter focus',function(){
					img.attr('src',src_on);
				});
			a.bind('mouseleave blur',function(){
					img.attr('src',src_off);
				});

発展形２

アニメーションをさせてのロールオーバー

liにマウスオーバー時の背景画像を設定して、マウスオーバー時には、imgを透明化して背景画像を表すコードです。 

	//jQueryオブジェクトは各自指定すること
    $("img").each(function(){
			//変数の複数宣言
			var src, osrc;
			//通常画像のsrc属性の取得
			//src = $(this).attr('src');
			//上記のjQueryオブジェクトのコードと同じ意味
			src = this.src;
			//オーバー時の画像設定
			osrc = src.replace(/^(.+)_off(\.[^\.]+)$/,'$1_on$2');
			//プリロード
			//$("").attr('src',src_on);
			//上記のjQueryの書き方と同じ意味
			new Image().src = osrc;
			//.parent()メソッドは、現在の要素から親要素を探すメソッドです。今回の場合はimg要素の親要素であるliを指定して、cssメソッドを適用させています。	
			$(this).parent().css('background','url(' + osrc + ') no-repeat');		
			$(this).hover(function(){
				$(this).stop(true).animate({
					opacity:0},200,'swing');
				},function(){
					$(this).stop(true).animate({
						opacity:1},400,'swing');
					});
		});