JQuery : 클래스 이름만으로 페이지 전체에 롤오버 이미지 쉽게 적용하기

$(document).ready(function(){
	$(".hoverimg").mouseover(function (){
		var file = $(this).attr('src').split('/');
		var filename = file[file.length-1];
		var path = '';

		for(i=0 ; i < file.length-1 ; i++) {
			path = ( i == 0 )?path + file[i]:path + '/' + file[i];
		}
		$(this).attr('src',path+'/'+filename.replace(/.([a-zA-Z]{3,3})$/, "_on.$1"));
		//$(this).attr('src',path+'/'+filename.replace('.','_on.'));

	}).mouseout(function(){
		var file = $(this).attr('src').split('/');
		var filename = file[file.length-1];
		var path = '';
		for(i=0 ; i < file.length-1 ; i++){
			path = ( i == 0 )?path + file[i]:path + '/' + file[i];
		}
		$(this).attr('src',path+'/'+filename.replace(/_on.([a-zA-Z]{3,3})$/, ".$1"));
		//$(this).attr('src',path+'/'+filename.replace('_on.','.'));
	});
});

작업중에 얻은 소스를 변경한것.
기존에는 지정한 파일 확장자의 _on 이미지 만을 사용했다면 변경한 것에는 이미지 파일에 상관 없이 클래스명이 "hoverimg" 일때 무조건 확장자 앞에 _on 의 유무에 따라 롤오버가 됨

위 소스를 넣고싶은 페이지에 붙여 넣고 이미지 테그에 class="hoverimg" 만 넣으면됨.

CC BY-NC-SA 4.0 This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

  • shifeed

    블로그에 담아갈께여~~~~!! 감사해요~~