Sprite image란 여러 장의 이미지를 하나의 이미지로 병합해놓은 이미지이다
2D 도트 게임에서 사용하는 개념이었지만 이제는 웹에서도 사용한다
이는 여러 이미지를 적은용량으로 효과적으로 사용할 수 있다
아래의 이미지를 사용할 것이다
아래의 코드는 위의 이미지를 사용해서 만든 마우스 오버 애니메이션 효과에 대한 코드이다
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<!--favicon : 사이트를 대표하는 이미지(즐겨찾기시 아이콘역할)-->
<link rel="icon" href="../img/chrome.png"> <!--일반적으로 .ico파일씀-->
<style>
li.bird1{
width:110px;
height: 110px;
/* background-image: url(../img/spriteImg.png); => 좌표 조정이 안됨 */
background: url(../img/spriteImg.png) 0 0;
}
li.bird2{
width:110px;
height: 110px;
/* background-image: url(../img/spriteImg.png); */
background: url(../img/spriteImg.png) -215px -676px;
}
li{
list-style-type: none;
float:left;
}
li.bird3{
clear:left;
width:110px;
height: 110px;
/* background-image: url(../img/spriteImg.png); */
background: url(../img/spriteImg.png) 0 0;
}
li.bird3:hover{
background: url(../img/spriteImg.png) -109px 0;
}
li.bird4{
width:110px;
height: 110px;
/* background-image: url(../img/spriteImg.png); */
background: url(../img/spriteImg.png) -215px -676px;
}
li.bird4:hover{
background: url(../img/spriteImg.png) -215px 220px;
}
</style>
</head>
<body>
<ul>
<li class="bird1"></li>
<li class="bird2"></li>
</ul>
<ul>
<li class="bird3"></li>
<li class="bird4"></li>
</ul>
</body>
</html>
이를 만들시 주의점은 image파일이라고 해서 background-image를 사용한다면
좌표 조정이 안되어 만들수가 없다
우선 각 이미지의 가로, 세로 사이즈를 동일하게 설정하고
background url에 원하는 사진파일의 원하는 위치좌표를 입력한다
단, 위의 코드와 같이 기존 사진파일의 좌표를 기존 사진파일과 변경할 사진파일 둘다에쓰고
변경할 사진파일의 좌표는 hover 속성 들어가서 쓴다
(위의 코드에서는 1과3 / 2와 4가 세트이다)
이를 참고하여 작성하면
다음과같은 결과물을 얻을 수 있다
다음의 이미지에 마우스오버를 하면
이와같이 변한다
728x90
