다른 창의 그림, 레이어 다루기

프레임 페이지로 구성한 페이지에서 다른 프레임에 있는 이미지나 레이어를 다룰 수 있습니다. 예를들면, 이미지에 마우스를 올려서 다른 프레임의 이미지를 바꾸거나 레이어를 이동시킬 수 있습니다.

<img src="img1.gif" name="img1" width=100 height=100 alt="이미지"> 

<a href="#" onMouseOver="document.img1.src='img2.gif'"
>마우스를 올리면 img1.gif 이미지를 img2.gif 이미지로 바꿉니다.</a>

위의 링크로 "img1.gif" 이미지를 "img2.gif" 이미지로 바꿀 수 있습니다. 근데, "img1.gif" 이미지가 다른 프레임에 있다면 그 프레임의 경로를 같이 지정해 주어야 합니다.

<frameset cols="120,*" border=0>
	<frame SRC="menu.htm" name="menu">
	<frame SRC="home.htm" name="home">
</frameset>

위의 식으로 두 프레임으로 만든 프레임 페이지의 오른쪽 프레임인 "menu" 프레임에 이미지가 있고 이 이미지를 "home" 프레임에서 바꿀려면 프레임의 경로인 parent.menu 를 덧붙여 주어야 합니다. 그래서 아래가 되겠죠.

<a href="#" onMouseOver="parent.menu.document.img1.src='img2.gif'"
>마우스를 올리면 왼쪽 프레임의 img1.gif 이미지를 img2.gif 이미지로 바꿉니다.</a>

레이어를 다루는 것도 비슷합니다. 다른 프레임에 있는 것을 다룰려면 parent.menu.의 식으로 다룰려는 프레임의 경로를 지정해 주면 됩니다. 레이어가 왼쪽 프레임인 "menu" 프레임에 있고 오른쪽 프레임에서 레이어의 바탕색을 바꿀려면 아래로 합니다.

<a href="#" onMouseOver="parent.menu.document.레이어.bgColor='red'"
>마우스를 올리면 왼쪽 프레임의 레이어 바탕색을 바꿉니다.</a>

위의 경우는 nn4용입니다. 레이어를 다루는 것은 이미지를 다루는 것과는 다르게 nn, ie에서 다른 DOM(Document Object Model)을 사용합니다. 그래서 ie4, ie5에서는 아래로 해야 합니다.

<a href="#" onMouseOver="parent.menu.document.all.레이어.style.backgroundColor='red'"
>마우스를 올리면 왼쪽 프레임의 레이어 바탕색을 바꿉니다.</a>

위의 구문은 레이어를 직접 다루는 것인데 레이어 안의 이미지를 다룰려면 또 다릅니다. 이런 모든 다른 경우가 생기는 이유는 제 홈페이지의 많은 페이지에서 설명하고 있습니다. ie4, ie5는 단순히 이미지를 바꾸는 것과 같이 할수 있지만 nn4는 레이어의 경로를 지정해 주어야 합니다. 그 구문은 아래입니다. (참고 하세요.. "레이어 내용물 다루기")

<a href="#" onMouseOver="parent.menu.document.레이어.document.이미지.src='img2.gif'"
>마우스를 올리면 왼쪽 프레임의 레이어 안의 이미지를 바꿉니다.</a>

--
낙서판의 질문에 답변할려니 내용이 많아서 페이지로 추가했습니다.
예제도 같이 만들려고 하다가 바로 올렸는데 예쁜 예제 만들면 보내주세요..
그리고 방명록도 잊지 마세요.. :)

[T O P]