[jQuery] jQuery를 이용한 이미지의 마우스오버2

일전에 jQuery를 이용한 마우스오버에 대한 포스팅을 한적이 있습니다. 궁금하신 분은 여기(http://htglss.tistory.com/21)를 참조하시면 되구요. 오랜만에 블로그에 들어와서 보니 아무리 보아도 뭔가 마음에 걸리는 부분이 있어서 약간의 업그레이드를 해보았습니다. 뭐 대단한 것은 아니고 코드를 좀 줄여보았고 한가지 기능을 추가해보았습니다. 뭐 대단한 기능은 아니고 아주 간단하지만 있으면 좋을 법한 기능입니다.

일단 마우스오버 이미지를 가장 많이 사용하는 부분은 메뉴 부분이라고 할 수 있을 것 같습니다. 그런데 메뉴에서 해당페이지에 들어가 있을 때는 그 메뉴를 활성화 해놓는 것이 보기에 약간은 더 좋은 것 같으므로 그런 기능을 추가해 보았습니다. 뭐 간단한 한줄이기에 쓰지 않을 때는 없애버려도 무방합니다.

그렇다면 시작해 볼까요?

전에는 구글 코드에 있는 jQuery 라이브러리를 가져왔는데 거기에도 있지만 jQuery 사이트에서도 CDN을 제공합니다. CDN의 자세한 내용은 이곳(http://htglss.tistory.com/42)을 참조해보시면 될 것입니다.

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

요렇게 jQuery 라이브러리를 불러와 줍니다. 그런다음에 이미지를 만들어야겠지요? 이미지는 전과 동일하게 이미지 명의 맨 뒤에 '_off' '_on' 을 넣어서 일반 이미지와 마우스오버되었을 때의 이미지를 만들어 줍니다. 그런다음에 이미지를 마크업해주어야겠지요?

<img src="image01_off.jpg" class="rollover" />
<img src="image02_off.jpg" class="rollover active" />
<img src="image03_off.jpg" class="rollover" />
<img src="image04_off.jpg" class="rollover" />

위와 같이 마우스오버 기능을 사용할 이미지에 rollover 라는 클래스 명을 주고, 현재 페이지의 메뉴에 해당하는  이미지인 두번째 이미지에는 active 라는 클래스를 주었습니다. 그리고 스크립트를 이렇게 작성하면 되겠습니다.

<script type="text/javascript">

if ( $('img').hasClass('active') ){

$('img.active').attr('src', $('img.active').attr('src').split('_off.')[0] + '_on.' + $('img.active').attr('src').split('_off.')[1]);

}

$('img.rollover').mouseover(function(){

if ( !$(this).hasClass('active') ){

var image_name = $(this).attr('src').split('_off.')[0];

var image_type = $(this).attr('src').split('off.')[1];

$(this).attr('src', image_name + '_on.' + image_type);

}

}).mouseout(function(){

if ( !$(this).hasClass('active') ){

var image_name = $(this).attr('src').split('_on.')[0];

var image_type = $(this).attr('src').split('_on.')[1];

$(this).attr('src', image_name + '_off.' + image_type);

}

});

</script>

이렇게 작성해주면 마우스오버 기능이 간단하게 동작하게 됩니다. 제일 첫줄에서 네째줄에 걸쳐있는 내용이 active라는 클래스명을 가진 이미지에 마우스오버 효과를 주는 내용입니다. 현재 메뉴에 해당하는 이미지는 항상 마우스오버 된 이미지로 되어있고 마우스의 동작에도 변화하지 않습니다.

이미지 파일명을 분리하는 부분을 "_off." 로 하여 코드를 단순화 시킬 수 있었습니다. 혹시 이미지 파일명 중간에 "_off." 이 들어가게 네이밍하시는 분은 없겠지요? 점까지 들어있는데... 그렇다면 이것을 사용하시지 않으시면 됩니다. ㅋㅋ 그런분들은 이것보다 더 완성도 있는 코드틀 만드실 수 있는 능력이 있으신 분들일 것 같습니다. 

마지막으로 한가지 단점이 있다면 active 라는 클래스명을 가진 이미지가 여러개가 중복되어 있으면 제일 첫번째에 나오는 하나의 이미지로 나오게 된다는 점입니다. 각각의 이미지명을 따로 관리하면 해결 가능 할 것 같은데 그것은 시간상 다음에 해결하도록 하겠습니다.

이상으로 jQuery를 이용한 이미지의 마우스오버 2탄을 마무리하도록 하겠습니다.