삼각형은 안만들어도 되는데 ;
이미지에서 좌표를 이용해서 삼각형 부분만 출력해 내는게 목적인지라...

아궁~ㅎㅎ

그러니 바탕화면에 특정한 곳에 삼각형 표시를 하려는 것이지요
레이어 뛰우시고 자스로 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>

밑에도 답변 달았는데..
이러면 각 도형마다 이미지를 따로 만들어서 처리해야 하는건데
그 방식이 아니라 하나의 이미지에서 여러개의 도형이 나올수도 있어요~

수고하셨습니다.

클릭은 따로 처리할거라 언급을 안했구요..
이미지에서 삼각형 부분만 출력한다는 의미가..
배경에 녹색부분을 제외하고 빨간 부분만을 보여주고 싶다는거죠..

예를들어 사각형이라고 가정하면 background-position 을 이용해서 해당영역만 보여줄 수 있거든요
그런데 다각형의 경우에는 그게 거의 불가능할것 같아서 혹시 다른 방법이 있는지 물어본거구요..

그 방식은 영역별로 이미지 따로 만들어서 보여주는 방식인데
그걸 얘기하는건 아니구요.. 좌표값을 이용해서 특정영역만을 보여줘야 한다는.. ㅠㅠ

은근히 반말 하셨네요 ㅋㅋ
오케이바리?

헐 영어로 접근은 생각 못해 봤네요.
오케바리가 오케버디였군 -_-ㅋㅋ 전 그냥 사투리인줄 ㅋㅋㅋㅋㅋ

시샵님 버디언 모르시죠?
전 한국인이기 때문에 버디입니다. 헬리코박터프로젝터윌

영어 발음은 이 정도는 되어줘야...
http://youtu.be/ARYc9Dd3RkQ

ㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎ

일단 기존익스 사용자들도 문제고 요 방식도 제가 원하는건 아니네요..
CSS 로 단순히 그리는 방식이면 크게 문제될게 없는데..
제가 삼각형을 그려놓은건 예제로 가장 간단한 다각형을 그린거구요..
이미지에서 수많은 점들로 이루어진 다각형도 만들어 질 수 있거든요..
그런 경우에 해당 좌표영역만 롤오버가 되도록 하려는거죠..

밑에서도 얘기했듯이 간단하게 처리될 부분은 절대 아닐듯하고 ;

최종 목적은 요런 방식을 얘기하는건데..
http://d.alistapart.com/sprites/ala-blobs2.html
눌러보시면 아시겠지만 이것도 사실 꼼수로 사각형영역과 여러장의 이미지로 처리한거거든요..

기존에 있는 jquery 중에 다각형을 그릴 수 있는걸 본적이 있는데
다각형을 그릴 수 있다면 반대로 삼각형 외의 영역도 잡아낼수 있을거고..
그 부분을 감출 수 있으면 원하는 결과가 나오거든요..
아마 비슷한 시도는 분명히 있었을듯한데 쉽지는 않았을듯..

제가 만들면 한 10년 걸릴듯하고 ;;
쉽게 찾을 수 있을거라 생각하진 않았는데 비슷한거 조차도 없네요..

한마디로 요약하자면..
"이미지에서 특정 영역만 보여지게 하는 방식" 이라고 할 수 있는데
겁나 복잡한 연산이 필요하지 않을까 싶다는...

원하는게 있기만 하다면 돈주고라도 살텐데 ㅠㅠ