오리님이 어제부터 고생하시는 것 같아서 지금 만들었어요.
http://hackya.com/lab/css3/red_triangle.htm
쪽지로 드릴려다가 다른분들도 이게 필요하실 수 있는 분들이 계실 것 같아서...
css 로 삼각형은 어떻게 만드는지 혹시 모르시겠는 분들을 위해서 저번주 올렸던 제 블로그 글 하나 소개 합니다.
|
댓글을 작성하시려면 로그인이 필요합니다.
로그인
댓글 21개
이미지에서 좌표를 이용해서 삼각형 부분만 출력해 내는게 목적인지라...
레이어 뛰우시고 자스로 png를 투명화 해보세요 백그라운드가 보이게
<style type="text/css">
.png24 {
tmp:expression(setPng24(this));
}
</style>
<script type="text/javascript">
function setPng24(obj) {
obj.width=obj.height=1;
obj.className=obj.className.replace(/\bpng24\b/i,'');
obj.style.filter =
"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+ obj.src +"',sizingMethod='image');"
obj.src='';
return '';
}
</script>
<div style="z-index:1000;position:absolute;top:15px;width:25">
<img src="/img/img.png" class="png24" />
</div>
이러면 각 도형마다 이미지를 따로 만들어서 처리해야 하는건데
그 방식이 아니라 하나의 이미지에서 여러개의 도형이 나올수도 있어요~
"삼각형 부분만 출력해 내는게" - 저는 클릭 가능한 삼각형이라고 이해했는데, 그런 의미가 아니셨나보네요.
삼각형 부분만 output/print 해야 된다? 이게 무슨 뜻인지 모르겠네요.
헤.... 한국어는 역시 어려운..... ㅎㅎㅎㅎㅎㅎ
이미지에서 삼각형 부분만 출력한다는 의미가..
배경에 녹색부분을 제외하고 빨간 부분만을 보여주고 싶다는거죠..
예를들어 사각형이라고 가정하면 background-position 을 이용해서 해당영역만 보여줄 수 있거든요
그런데 다각형의 경우에는 그게 거의 불가능할것 같아서 혹시 다른 방법이 있는지 물어본거구요..
그걸 얘기하는건 아니구요.. 좌표값을 이용해서 특정영역만을 보여줘야 한다는.. ㅠㅠ
오케이바리?
OK Buddy? 이게 반말인가요????? ^^ 됐지 친구야? 이런 말인데. ㅎㅎㅎㅎㅎ
오케바리가 오케버디였군 -_-ㅋㅋ 전 그냥 사투리인줄 ㅋㅋㅋㅋㅋ
전 한국인이기 때문에 버디입니다. 헬리코박터프로젝터윌
http://youtu.be/ARYc9Dd3RkQ
에이 C.
지금 긴장타고 DB 만져야 하는데, 갑자기 일하기 싫어짐.
일할라믄, 냑에 오질 말아야 되요. ㅋㅋㅋㅋㅋㅋㅋㅋ
http://www.html5canvastutorials.com/kineticjs/html5-canvas-path-mouseover/ (캔버스로 하시면 왜 안되는지 이해가 안되는데)
그렇다면 단연코 방법은 존재하지 않습니다. ^^
CSS 로 단순히 그리는 방식이면 크게 문제될게 없는데..
제가 삼각형을 그려놓은건 예제로 가장 간단한 다각형을 그린거구요..
이미지에서 수많은 점들로 이루어진 다각형도 만들어 질 수 있거든요..
그런 경우에 해당 좌표영역만 롤오버가 되도록 하려는거죠..
밑에서도 얘기했듯이 간단하게 처리될 부분은 절대 아닐듯하고 ;
최종 목적은 요런 방식을 얘기하는건데..
http://d.alistapart.com/sprites/ala-blobs2.html
눌러보시면 아시겠지만 이것도 사실 꼼수로 사각형영역과 여러장의 이미지로 처리한거거든요..
기존에 있는 jquery 중에 다각형을 그릴 수 있는걸 본적이 있는데
다각형을 그릴 수 있다면 반대로 삼각형 외의 영역도 잡아낼수 있을거고..
그 부분을 감출 수 있으면 원하는 결과가 나오거든요..
아마 비슷한 시도는 분명히 있었을듯한데 쉽지는 않았을듯..
제가 정확하게 오리님이 뭘 의도하시는지 이해를 못하고 있는거는 확실합니다.
오리님이 직접 만드셔서 보여주셔야 이해가 될 것 같습니다. :D
쉽게 찾을 수 있을거라 생각하진 않았는데 비슷한거 조차도 없네요..
한마디로 요약하자면..
"이미지에서 특정 영역만 보여지게 하는 방식" 이라고 할 수 있는데
겁나 복잡한 연산이 필요하지 않을까 싶다는...
원하는게 있기만 하다면 돈주고라도 살텐데 ㅠㅠ