image (1)
01. css background 태그를 이용한 마우스 오버/아웃
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>Document</title>
<style type=”text/css”>
a {
display: block;
width: 100px; /* 이미지의 가로와 세로 사이즈를 정의해 줍니다. */
height: 100px;
background: url(image01.png)0 0 no-repeat; /* 실질적으로 이미지가 변경 되는 부분입니다. 마우스 아웃 (out) */
}
a:hover { /* a 태그(링크태그) 에 마우스를 올렸을때 동작을 나타내는 태그입니다.*/
background: url(image02.png)0 0 no-repeat; /* 실질적으로 이미지가 변경 되는 부분입니다. 마우스 오버 (over) */
}
</style>
</head>
<body>
<div>
<a href=””></a>
</div>
</body>
</html>
** 해당 파일 적용 예제는 위에 파일첨부 하였습니다.
02. HTML만 사용하여 마우스 오버/아웃
<a href=”링크주소”>
<img src=”기본이미지주소” onmouseover=”this.src=’마우스올렸을때 바뀔 이미지주소'” onmouseout=”this.src=’기본이미지주소'” border=”0″ />
</a>
예제 )
