<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<style>
*{
margin:0;padding:0;
}
.header{
background:#91b280;
border-bottom:8px solid #91b280;
}
.menu{
height:25px;
}
.menu li{
list-style-type:none;
float:left;
padding:0 0 0 8px;
}
</style>
메뉴
$('.menu_item').each(function(){
}
클래스 속성값으로 menu_item 을 갖는 각각의 객체에 대해서 파라미터로 전달된 콜백함수를 수행한다. 여기서는 메뉴를 구성하는 <a>태그들이 클래스 속성 값으로 menu_item 를 갖는다.
var a = $(this);
선택한 객체(DOM)를 jQuery 개체로 변환해서 변수 a 에 반환한다.
var img = a.find('img');
현재 객체 안에서 이미지 객체를 찾아서 반환한다.
var src_off = img.attr('src');
이미지 객체의 속성값 src의 값을 변수 src_off 에 반환한다. 변수 src_off 값으로는 차례대로 '/images/menu1_off.png', /images/menu2_off.png', '/images/menu3_off.png' 가 온다.
var src_on = src_off.replace('_off', '_on');
변수 src_off 에 들어있는 문자열 '/images/menu1_off.png' 에서 '_off' 를 찾아 '_on' 으로 변경한 후, 변경된 문자열을 변수 src_on 에 넣는다.
a.hover(function(){},function{});
<a> jQuery 메소드 hover()의 콜백함수를 정의한다. 첫번째 콜백함수는 마우스가 객체위에 올라갔을때 실행된다. 두번째 콜백함수는 마우스가 객체를 벗어날때 실행된다. 즉, 첫번째 콜백함수에서는 마우스가 메뉴에 올라갔을때 이미지로 교체하고 두번째 콜백함수는 마우스가 메뉴에서 벗어났을때 이미지로 교체한다.
a.hover(function(){
img.attr('src', src_on);
},function(){
img.attr('src', src_off);
}
아래 이미지는 '메뉴1'에 마우스를 올렸을 때, 이미지를 파란색 배경 이미지로 교체한 모습이다.
메뉴1에 마우스를 올렸을 때 모습