CSS Background-Position을 이용한 롤오버 버튼 작성
페이지 정보
작성자 서방님 댓글 0건 조회 99회 작성일 13-04-23 15:07본문
Html 작성을 하다보면 수도 없이 Rollover(롤오버) 버튼의 제작 이슈에 당면하게 됩니다.
저같은 경우는
자바스크립트를 이용해서 이미지의 onmouseover/onmouseout 이벤트에 이미지 경로를 바꿔서 보여주는 형태를 많이 취했습니다. 하지만 이러한 방법의 경우는 각 이미지의 모든 태그에 해당 이벤트에 대한 코딩을 해야하고, 수정이나 변경 이슈가 있을 경우 소스들을 찾아가며 노가다를 뛰어야 하는 경우가 많았습니다.
그리고, 또 다른 방법으로는
a태그에 display 속성을 block으로 설정하고, backgournd-image를 이용하여 CSS에서 a:hover를 정의해 background-image경로를 바꾸어 주는 방식도 또한 사용해 보았습니다. 이 방법 또한 한가지 문제를 가지고 있는데, 브라우저 종류, 버전에 따라서 깜박임 현상이 심하게 발생되는는 문제가 있었습니다. 이 부분은 아무리 찾아봐도 처리할 방도가 없더군요.
그래서 다른 방법을 찾다보니,
예전에 어플리케이션 버튼 제작시에 사용하던 방법처럼 background-image의 위치를 변경해서 롤오버 효과를 나타내는 방법이, 위에서와 같은 여러 문제점의 처리와 장점들을 가지고 있어서 계속해서 사용하고 있습니다.
아래에 해당 방법에 대해서 간단히 기술하겠습니다.
1. background image
- 상위 이미지 : 평상시 배경, 하위 이미지 : 롤오버시 배경
2. style 정의
3. html 코딩
4. 실제 코딩 예제
<style> a.rolloverbtn { display:block; width: 80px; height: 20px; padding: 10px; text-align: center; background-image: url(/tc/attach/1/2255808668.gif)undefined; background-position: left top; font-size: 12px; font-weight: bold; } a.rolloverbtn:hover { background-position: left bottom; } </style> 롤오버버튼
5. 설명
- 위 버튼중에서 특별히 체크할 사항은 background-position 뿐이니, 아래를 참조하십시오.
- 사이트를 작성하다보면, 비슷한 형태의 버튼들을 템플릿으로 작성해 두고 그때그때 이용할 필요가 있습니다. 이와 같은 버튼의 형태를 필요에 따라 정의해 두고 사용을 한다면, 사용성이나 유지보수에도 상당히 용이한 방법이라 생각이 됩니다.
저같은 경우는
자바스크립트를 이용해서 이미지의 onmouseover/onmouseout 이벤트에 이미지 경로를 바꿔서 보여주는 형태를 많이 취했습니다. 하지만 이러한 방법의 경우는 각 이미지의 모든 태그에 해당 이벤트에 대한 코딩을 해야하고, 수정이나 변경 이슈가 있을 경우 소스들을 찾아가며 노가다를 뛰어야 하는 경우가 많았습니다.
그리고, 또 다른 방법으로는
a태그에 display 속성을 block으로 설정하고, backgournd-image를 이용하여 CSS에서 a:hover를 정의해 background-image경로를 바꾸어 주는 방식도 또한 사용해 보았습니다. 이 방법 또한 한가지 문제를 가지고 있는데, 브라우저 종류, 버전에 따라서 깜박임 현상이 심하게 발생되는는 문제가 있었습니다. 이 부분은 아무리 찾아봐도 처리할 방도가 없더군요.
그래서 다른 방법을 찾다보니,
예전에 어플리케이션 버튼 제작시에 사용하던 방법처럼 background-image의 위치를 변경해서 롤오버 효과를 나타내는 방법이, 위에서와 같은 여러 문제점의 처리와 장점들을 가지고 있어서 계속해서 사용하고 있습니다.
아래에 해당 방법에 대해서 간단히 기술하겠습니다.
1. background image
- 상위 이미지 : 평상시 배경, 하위 이미지 : 롤오버시 배경
2. style 정의
<style>
a.rolloverbtn {
display:block; // width, height 영역을 설정하기 위해 필요
width: 80px;
height: 20px;
padding: 10px;
text-align: center;
background-image: url(/tc/attach/1/2255808668.gif)undefined;
background-position: left top; // 백그라운드 위치 설정
font-size: 12px;
font-weight: bold;
}
a.rolloverbtn:hover {
background-position: left bottom; // 백그라운드 위치 설정
}
</style>
a.rolloverbtn {
display:block; // width, height 영역을 설정하기 위해 필요
width: 80px;
height: 20px;
padding: 10px;
text-align: center;
background-image: url(/tc/attach/1/2255808668.gif)undefined;
background-position: left top; // 백그라운드 위치 설정
font-size: 12px;
font-weight: bold;
}
a.rolloverbtn:hover {
background-position: left bottom; // 백그라운드 위치 설정
}
</style>
3. html 코딩
<a href="#" class="rolloverbtn" onclick="alert('클릭');">롤오버버튼</a>
4. 실제 코딩 예제
<style> a.rolloverbtn { display:block; width: 80px; height: 20px; padding: 10px; text-align: center; background-image: url(/tc/attach/1/2255808668.gif)undefined; background-position: left top; font-size: 12px; font-weight: bold; } a.rolloverbtn:hover { background-position: left bottom; } </style> 롤오버버튼
5. 설명
- 위 버튼중에서 특별히 체크할 사항은 background-position 뿐이니, 아래를 참조하십시오.
background-position
<percentage> <percentage>
With a value pair of '0% 0%', the upper left corner of the image is aligned with the upper left corner of the box's padding edge. A value pair of '100% 100%' places the lower right corner of the image in the lower right corner of padding area. With a value pair of '14% 84%', the point 14% across and 84% down the image is to be placed at the point 14% across and 84% down the padding area.
<length> <length>
With a value pair of '2cm 2cm', the upper left corner of the image is placed 2cm to the right and 2cm below the upper left corner of the padding area.
top left and left top
Same as '0% 0%'.
top, top center, and center top
Same as '50% 0%'.
right top and top right
Same as '100% 0%'.
left, left center, and center left
Same as '0% 50%'.
center and center center
Same as '50% 50%'.
right, right center, and center right
Same as '100% 50%'.
bottom left and left bottom
Same as '0% 100%'.
bottom, bottom center, and center bottom
Same as '50% 100%'.
bottom right and right bottom
Same as '100% 100%'.
http://www.dhtmlgoodies.com/scripts/css-lookup/css-lookup.html 에서 참조| Value: | [ [<percentage> | <length> ]{1,2} | [ [top | center | bottom] || [left | center | right] ] ] | inherit |
| Initial: | 0% 0% |
| Applies to: | block-level and replaced elements |
| Inherited: | no |
| Percentages: | refer to the size of the box itself |
| Media: | visual |
| JSS: | document.getElementById('objId').style.backgroundPosition |
<percentage> <percentage>
With a value pair of '0% 0%', the upper left corner of the image is aligned with the upper left corner of the box's padding edge. A value pair of '100% 100%' places the lower right corner of the image in the lower right corner of padding area. With a value pair of '14% 84%', the point 14% across and 84% down the image is to be placed at the point 14% across and 84% down the padding area.
<length> <length>
With a value pair of '2cm 2cm', the upper left corner of the image is placed 2cm to the right and 2cm below the upper left corner of the padding area.
top left and left top
Same as '0% 0%'.
top, top center, and center top
Same as '50% 0%'.
right top and top right
Same as '100% 0%'.
left, left center, and center left
Same as '0% 50%'.
center and center center
Same as '50% 50%'.
right, right center, and center right
Same as '100% 50%'.
bottom left and left bottom
Same as '0% 100%'.
bottom, bottom center, and center bottom
Same as '50% 100%'.
bottom right and right bottom
Same as '100% 100%'.
- 사이트를 작성하다보면, 비슷한 형태의 버튼들을 템플릿으로 작성해 두고 그때그때 이용할 필요가 있습니다. 이와 같은 버튼의 형태를 필요에 따라 정의해 두고 사용을 한다면, 사용성이나 유지보수에도 상당히 용이한 방법이라 생각이 됩니다.
댓글목록
등록된 댓글이 없습니다.
