플래시를 이용하지 않고 이미지 만으로 마우스오버 연출

• etc/• blog tip & utill / 2012. 9. 10. 13:21

* 플래시를 이용하지 않고 이미지 만으로 마우스오버 연출 *

 

 

 

플래시를 이용하지 않고 이미지 만으로 마우스 오버시 이미지 변경하고 싶은경우 많이 사용한다.

먼저 본래 이미지와 마우스 오버시 변경하고 싶은 이미지 두개를 만들어준다.

단, 두 이미지 크기가 같아야 자연스러운 마우스 오버를 연출할 수 있다.

두개의 이미지가 모두 준비가 되었다면, 소스안 이미지 삽입되는 부분에 아래 예문과 같이 넣어준다.

<본래 이미지 삽입경우>

<img src="이미지 경로" width="100" height="100" border="0" />

<마우스 오버 이미지 삽입경우>

<img border=0 src="본래 이미지 경로" img onmouseover="this.src='마우스오버시 이미지 경로'" onmouseout="this.src='본래 이미지 경로'" width="100" height="100" />

위로가기

POWERED BY TISTORY. THEME BY HE+STORY