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

그림에 각각 마우스커서를 올려보세요. 옆에 있는 그림들까지 함께 롤오버 됩니다.

  

일반적인 롤오버는 그림에 마우스커서를 올리면 그 그림만 롤오버가 됩니다. 하지만, 이 스크립트는 다른 그림들까지 모두 롤오버 시킵니다.
 

흑백그림과 컬러그림을 적절히 이용한다면 어두운 방안에 살짝 불이 들어오는 것처럼 신비로운 효과도 낼 수 있습니다. 그림 하나에만 롤오버 시킬 때와는 사뭇 다른 느낌입니다.
   
위에 사용된 총 이미지는 6장입니다.

example01a.gif
example01b.gif
example02a.gif
example02b.gif
example03a.gif
example03b.gif

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

<script type="text/javascript">
<!-- Original: Mike McGrath - (mike_mcgrath@lineone.net) -->
<!-- Web Site: http://website.lineone.net/~mike_mcgrath -->
<!--

// 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 가 포함된 부분에서 추가하거나 뺄 수 있습니다.

<body>~</body>사이에 아래와 같은 방법으로 그림을 링크합니다

<a href="http://www.happycgi.com" onMouseOver="swp(1)" onMouseOut= "swp(0)"><img name="a" id="a" src="example01a.gif" border="0"></a>

<a href="http://www.happycgi.com" onMouseOver="swp(1)" onMouseOut= "swp(0)"><img name="b" id="b" src="example02a.gif" border="0"></a>

<a href="http://www.happycgi.com" onMouseOver="swp(1)" onMouseOut= "swp(0)"><img name="c" id="c" src="example03a.gif" border="0"></a>
  • http://www.happycgi.com는 이미지에 연결할 링크주소.
  • example01a.gif, example02a.gif, example02a.gif 는 각각 바탕에 기본으로 깔리는 그림입니다.
  • 파란색 a, b, c 부분은<head>~</head> 에 들어가는 소스와 맞춰주시면 됩니다.