CSS로 이미지 바꿈효과 내기 Go to UP


NN3이나 IE3.02에서의 이미지 바꾸기에서 바꿀 이미지와 원래의 이미지 모두 2벌이 필요 했습니다. 이중 구조에서는 3벌이 필요합니다. 하지만, NN4, IE4의 JavaScript1.2에서는 layer를 겹으로 두고 밑의 layer의 바탕색을 이용합니다. 투명 이미지, GIF 이미지와 layer의 바탕색을 사용하여 이미지 한 벌로도 이미지에 색깔 변화를 줄 수가 있습니다.

이것을 잘 이용하면 이미지를 적게 사용할 수가 있습니다. 당연히 속도가 빨라 집니다. 

<style>
(0)	#rollver { position:relative; } 
(1)	#backColor { position:absolute; left:100px; top:200px; width:500; visibility:hidden; 
(2)		background-color:red; layer-background-color:red; clip:rect(0,500,10,0); 
	}
(3)	#IMG { position:absolute; left:100px; top:200px; clip:rect(0, 500, 10, 0); 
	}
</style>

<div id=backColor></div>
<div id=IMG><a href="#" onMouseOver="over(false, 0, 100)" onMouseOut="over(true)"
><img src="../images/gb1.gif" border="0" width=100 height=10
></a></div>
여기서 바꿀 색깔로 "backColor"라는 이름의 div 블록 택을 사용 했습니다. 이 블록의 바탕색은 빨강색입니다. 이 색깔이 투명이미지 밑에 있습니다. 투명이미지 밑의 색을 바꾸면 투명이미지 중의 일부가 그 색깔이 나옵니다. 그러므로, 바꿀 색깔을 이미지가 위에 올 수 있게 페이지에서 이미지보다 먼저 출력되어야 합니다. 나중에 출력되는 position element가 먼저 출력된 position element 위에 옵니다.

주석 (1)번 줄의 visibility:hidden는 마우스가 이미지 위에 갔을 때 사용할 것이므로 처음에는 보이지 않게 합니다. width:500;은 IE4의 경우 이것으로 넓이를 지정하지 않으면 한 줄 다 색깔을 입힙니다. clip로도 지정할 수 있습니다.
주석 (2)번 줄의 layer-background-color:red;는 NN4의 CSS layer 바탕색 bug입니다. 지정된 크기 만큼 바탕색을 입힙니다. background-color:red;는 내용물이 있는만큼 만 색깔을 입힙니다. NN4 CSS Layer에서는 layer-background-color:red;을 사용 하세요. 이것은 NN에서 만 지원합니다.

NN4, IE4에서 둘 다 마찮가지 이지만, 브라우저가 지원하지 않는 Attribute는 그냥 무시 합니다. 에러가 나지 않습니다. 따라서, background-color:red; layer-background-color:red; 이렇게 둘 다 넣어주면 IE4는 뒤의 것을 무시하고 NN4은 두번 설정하므로, 뒤에 설정한 것이 지정됩니다.

주석 (2)번의 clip:rect(0,500,10,0)는 크기가 100x10인 이미지가 5개가 있으므로 이렇게 지정을 합니다.
clip:rect(top, right, bottom, left)입니다.

주석 (0)번은 페이지 아무데나 편리하게 두기위해 두 layer를 position:reletive; 을 가진 layer로 감쌌습니다. 

function verChack() {
        NN4 = (document.layers) ? true : false;
	IE4 = (document.all) ? true : false;
        DHTML = ( NN4 || IE4 ) ? true : false;
}
여기서 사용자의 브라우저를 구분합니다. layers는 NN4에서 지원하는 Object입니다. all은 IE4에서 지원합니다. 이것이 if 문 안에서는 지원하면 TRUE를 그렇지 않으면 FALSE를 반환합니다. 둘 다 지원하지 않으면 DHTML을 지원하지 않는 브라우저 NN3, IE3.02 이하로 보고 DHTML 외부 변수에 저장합니다. 
<div id=IMG>
	<a href="#" onMouseOver="over(false, 100, 200)" onMouseOut="over(true)"> <!-- (1) -->
	<img src="../images/gb1.gif" border=0>
	</a>
</div>
(1)번 줄의 onMouseOver = "over(false, 100, 200)"에서 false는 mouseover과 mouseout를 구분하기 위한 것이고 뒤의 100, 200은 이미지 layer의 밑의 layer의 바탕색을 이미지 위치와 같은 만큼 만 바꾸기 위해서 이미지의 크기와 같이 지정합니다. onMouseOut = "over(true)"는 마우스가 이미지를 빠져 나갔을 때, 원래의 이미지 색으로 두기위해 밑의 layer를 보이지 않게 하는 것입니다. 
function over(flag, left, right) {
  (1)	if ( !DHTML ) return;                                 
  (2)	if (NN4) var backColorLayer = document.rollver.document.backColor;
  (3)	if (IE4) var backColorLayer = document.all.backColor.style;

  (4)	if ( flag ) { backColorLayer.visibility = "hidden"; return; }

	 if ( NN4 ) {
  (5)		backColorLayer.clip.left = left; 
  (6)		backColorLayer.clip.right = right; 
	 }
  (7)	if ( IE4 ) backColorLayer.clip = "rect("+clipTop+" "+right+" "+clipBottom+" "+left+")"; 

  (8)	backColorLayer.visibility = "visible"; 
}
  (9)   clipTop = 0; clipBottom = 10;
(1)은 NN4, IE4가 아닌 브라우저는 위에서 DHTML에 null이 지정되어 있습니다. 따라서, if (!DHTML)은 참입니다. 여기서 함수를 빠져 나갑니다.

(2), (3)번은 NN4와 IE4에서 Position element를 사용하는 방식이 다릅니다. NN4는 layer라는 새로이 추가된 Object입니다. images와 같습니다. 그리고 layer 속의 모든 것은 layer의 document입니다.

IE4는 페이지에 출력된 모든 style을 가진 택은 "all" Object에 속합니다. 그래서, 앞에 all을 넣어줘야 합니다. 그리고, 택이 style을 가지고 있을 때, 각 style Property는 "style"이라는 Object에 포함 됩니다. 그래서 각 style property를 참조할 때, style property앞에 style를 넣어줘야 합니다. 그리고, NN4와는 다르게 layer속의 layer도 같은 계층입니다.

(4)는 마우스가 이미지를 빠져나갈 때, flag 값으로 true를 줍니다. 다시 밑의 바탕색을 보이지 않게 합니다. 원래의 투명 이미지의 색으로 돌려 놓습니다. 그리고, 할 일이 없으므로, 빠져 나갑니다.

(5), (6), (7)에서 CLIP은 block element의 크기를 자를 때 사용합니다. cilp.top, clip.right, clip.bottom, clip.left 4가지가 있습니다. 이 clip도 NN4와 IE4가 사용하는 방법이 다릅니다. NN4에서는 4개 중 한 개나 두개 이상을 지정하면 지정된 부분에 크기를 바꿉니다. 반면에, IE4에서는 4가지 모두 같이 사용해야 하고, 하나의 문자열로 사용 합니다. 즉, style에서 clip:rect(0,500,10,0); 을 지정하면 IE4는
document.all.element.style.clip="rect(toppx rightpx bottompx leftpx)" 로 단순한 문자열입니다. 단위 px는 자동으로 붙습니다.

(8)은 밑의 layer를 보이게 합니다. 위에서 크기는 clip로 지정을 했습니다. clip한 것을 보이게 합니다.

(9)는 여기서 이미지의 top과 bottom은 일정한 크기 100, 10입니다. 따라서, NN4에서는 left와 right만 있으면 되지만, (9)는 IE4를 위해서 입니다. IE4는 4개의 clip가 같이 사용을 합니다. 

<html>
<head>
<style>
	#rollver { position:relative; };
	#backColor { position:absolute; left:10px; top:20px; width:500; visibility:hidden;
		background-color:red; layer-background-color:red; width:500; clip:rect(0,500,10,0);
	}
	#IMG { position:absolute; left:10px; top:20px; width:500; clip:rect(0, 500, 10, 0);
	}
</style>
<SCRIPT LANGUAGE="JAVASCRIPT">
function verChack() {
        NN4 = (document.layers) ? true : false;
	IE4 = (document.all) ? true : false;
        DHTML = ( NN4 || IE4 ) ? true : false;
}
function over( flag, left, right) {
	if ( !DHTML ) return;
	if (NN4) var backColorLayer = document.rollver.document.backColor;
	if (IE4) var backColorLayer = document.all.backColor.style;

	if ( flag ) { backColorLayer.visibility = "hidden"; return; }

	if ( NN4 ) {
		backColorLayer.clip.left = left;
		backColorLayer.clip.right = right;
	}
  	if ( IE4 ) backColorLayer.clip = "rect("+clipTop+" "+right+" "+clipBottom+" "+left+")";

	backColorLayer.visibility = "visible";
}
clipTop = 0; clipBottom = 10;
verChack();
</script>
</head>
<body>
<div id=rollver>
 <div id=backColor></div>
 <div id=IMG><a href="#" onMouseOver="over(false, 0, 100)" onMouseOut="over(true)"
 ><img src="../images/gb1.gif" border="0" alt="gif1"
 ></a><a href="#" onMouseOver="over(false, 100, 200)" onMouseOut="over(true)"
 ><img src="../images/gb2.gif" border="0" alt="gif2"
 ></a><a href="#" onMouseOver="over(false, 200, 300)" onMouseOut="over(true)"
 ><img src="../images/gb3.gif" border="0" alt="gif3"
 ></a><a href="#" onMouseOver="over(false, 300, 400)" onMouseOut="over(true)"
 ><img src="../images/gb4.gif" border="0" alt="gif4"
 ></a><a href="#" onMouseOver="over(false, 400, 500)" onMouseOut="over(true)"
 ><img src="../images/gb5.gif" border="0" alt="gif5"
 ></a></div>
</div>
</BODY>
</HTML>
gif1gif2gif3gif4gif5

 

TOP