멀티롤오버 이미지 happycgi

회원가입

출석체크

마이페이지

CGIMALL

jquery , CSS , PHP , Javascript , 무료폰트 , ASP

홈 > JAVASCRIPT > javascript 소스창고 > 이미지관련 > 멀티롤오버 이미지 상세정보

클라우드태그

Javascript

PHP

HTML

asp

MYSQL

CSS

mobile

jquery

image

slide

占쌨댐옙

占쏙옙占쏙옙占쏙옙트

메뉴

현재접속자 명

멀티롤오버 이미지

해피팀

네티즌

소스분류

이미지관련

다운로드 횟수

760 회

간단설명

이미지를 마우스 롤오버하면 다른 이미지도 같이 롤오버 이미지 효과를 나타냅니다.

평가하기

:: 멀티 롤오버 이미지 ::

그림에 각각 마우스커서를 올려보세요. 옆에 있는 그림들까지 함께 롤오버 됩니다.		일반적인 롤오버는 그림에 마우스커서를 올리면 그 그림만 롤오버가 됩니다. 하지만, 이 스크립트는 다른 그림들까지 모두 롤오버 시킵니다.
	흑백그림과 컬러그림을 적절히 이용한다면 어두운 방안에 살짝 불이 들어오는 것처럼 신비로운 효과도 낼 수 있습니다. 그림 하나에만 롤오버 시킬 때와는 사뭇 다른 느낌입니다.

위에 사용된 총 이미지는 6장입니다.
example01a.gif	example01b.gif	example02a.gif	example02b.gif	example03a.gif	example03b.gif

우선 자바스크립트 소스를 <head>~</head>사이에 소스를 넣습니다.

// preload the swap images

var pre=new Image(); pre.src="example01b.gif"; example02b.gif"; "example03b.gif";

function swp(n)
{
// netscape 6 rollovers

if(navigator.appName=="Netscape" && document.getElementById)
{
document.getElementById("a").src=(n!=0)?"example01b.gif":"example01a.gif";
document.getElementById("b").src=(n!=0)?"example02b.gif":"example02a.gif";
document.getElementById("c").src=(n!=0)?"example03b.gif":"example03a.gif";
}

else

// netscape 3, 4, opera 5 and ie 5 rollovers

with(document.images)
{
if(n!=0)
{
a.src="example01b.gif"; b.src="example02b.gif"; c.src="example03b.gif";
}
else
{
a.src="example01a.gif"; b.src="example02a.gif"; c.src="example03a.gif";
}
}
}

//-->
</script>

example01a.gif, example02a.gif, example02a.gif 는 각각 바탕에 기본으로 깔리는 그림입니다.
example01b.gif, example02b.gif, example02b.gif 는 각각 바탕그림 위에 마우스가 올라가면 나타나는 롤오버이미지입니다.

var pre=new Image(); pre.src 로 시작되는 줄은, 롤오버이미지인 example01b.gif, example02b.gif, example02b.gif를 페이지가 로딩됨과 동시에 미리 불러들여서 바탕그림 위에 마우스가 올라갔을 때 미리 불러들여진 그림이 바로 나타나게 하는 부분입니다.

그림을 추가하거나 뺄 때는 var pre=new Image(); pre.src 줄과 파란색 a, b, c 가 포함된 부분에서 추가하거나 뺄 수 있습니다.

아래 a.src=" " 로 시작부분은 이미지의 경로를 지정하시면 됩니다.