롤오버 재 질문... 정보
롤오버 재 질문...
본문
<== 원본이미지 
<== 최종 출력 결과어제 올렸던 질문인데 아직 해답을 찾질 못했네요 ㅠㅠ
일단 다른부분들을 제외하고 위 이미지에서
녹색배경을 제외한 세군데 꼭지점으로 이루어진 빨간 삼각형 영역 부분만 출력하는게 목적인데
아무래도 css 로는 무리일듯 싶고 jquery 라던가 다른방법으로 혹시 불가능할까요?
위대하신분이 만들어 놓은게 어딘가에 있을법도 한데... ㅠㅠ
< 규칙 >
1. 삼각형 부분을 이미지로 자르거나 원본배경(녹색)을 투명처리하면 안됨
2. 이미지 가공없이 좌표만을 이용해서 이미지의 삼각형 영역을 보여줘야 함
3. 벡터방식등으로 직접 그리면 안되고 상단의 이미지를 이용해야함
4. 삼각형이 아닌 복잡한 형태의 다각형도 될 수 있고 한 이미지에 여러개의 도형이 있을수도 있음
뭔가 프로그램 경시대회 같은게 되는듯한 ;;
가장 비슷한 형태는 아래와 비슷하다고 보시면 됩니다. (단 곡선이 아닌 직선형태의 다각형만 사용할거구요)
추천
0
0
댓글 28개
요거슨 걍 css인듯요..
이미지에서 특정영역의 다각형만을 출력하는게 목적이라...
이미지에서 특정영역의 다각형만을 출력하는게 목적이라...
레이어? 뛰운상테에서 자스로 굴려야겠네요 좌표지정해서 말씀인가여
일단 다른부분은 필요없구요..
위에 적힌것처럼 이미지에서 삼각형만 보여줄 수 있음 되요 ㅋㅋ
간단한 기술은 아닐듯 ;
레이어로 띄우더라도 빨간영역만 보여줘야 하는데 그게 문제인거죵 ㅠㅠ
위에 적힌것처럼 이미지에서 삼각형만 보여줄 수 있음 되요 ㅋㅋ
간단한 기술은 아닐듯 ;
레이어로 띄우더라도 빨간영역만 보여줘야 하는데 그게 문제인거죵 ㅠㅠ
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>
.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>
그렇게 하게되면 롤오버 되는 영역마다 이미지가 필요해서 안되구요..
한장 이미지에서 좌표로 그 부분만 보여줘야 하거든요...
예를들어 지도에서 아메리카대륙 아프리카대륙 아시아 대륙이 있다면
이런방식으로 하게되면 각각의 이미지들을 따로 만들어서 처리하게 되는건데
제가 원하는 방식은 기본상태의 이미지 한장과 오버상태의 이미지 한장
이렇게 두장의 이미지와 해당 지역의 좌표값을 이용해서 보여주는게 목적이라서요..
한장 이미지에서 좌표로 그 부분만 보여줘야 하거든요...
예를들어 지도에서 아메리카대륙 아프리카대륙 아시아 대륙이 있다면
이런방식으로 하게되면 각각의 이미지들을 따로 만들어서 처리하게 되는건데
제가 원하는 방식은 기본상태의 이미지 한장과 오버상태의 이미지 한장
이렇게 두장의 이미지와 해당 지역의 좌표값을 이용해서 보여주는게 목적이라서요..
지도 api 영역설정과 비슷한 방법을 원하시는군요
pseudo-elements 는 IE 9 이상부터만 지원 되는데 오리님은 IE 에서 구동되는 솔루션을 찾으시더라구요.....
ie에서 구동되야죠 제일 많이 쓰는데..특히 코리아에서...ㅎㅎ
익스는 필수요 ㅜㅜ
출근합니다 젝일 한글날에 출근이라니... 에혀~
한글날 특별수당을 제공하라!! 제공하라!!
ㅎㅎㅎ 드러운세상 ㅎㅎㅎ
css 로 삼각형을 출력하셔야 하는 문제인지, 삼각형은 이미지로 만들어도 되는지 이 부분부터 명확하게 밝히시면,
그 조건에 따라서 드림위버의 hot spot 으로 처리 하시든가,
아니면 이미지 파일 (jpg.png) 사용은 하면 안된다면, 캔버스로 그리신후, 라파엘.js 로 처리하실수도 있는 문제 같은데,
한국어가 참 어려운 언어라서.. ㅎㅎㅎㅎ
그 조건에 따라서 드림위버의 hot spot 으로 처리 하시든가,
아니면 이미지 파일 (jpg.png) 사용은 하면 안된다면, 캔버스로 그리신후, 라파엘.js 로 처리하실수도 있는 문제 같은데,
한국어가 참 어려운 언어라서.. ㅎㅎㅎㅎ
그리는건 안되구요..
간단히 말해서 위 이미지로 빨간 영역만 출력할 수 있음 되는거에요.. (세개의 좌표를 이용해서)
빨간삼각형만 따로 이미지로 잘라서 보여주고 이럼 안되구요 ㅎㅎ
라파엘은 벡터형태로 걍 그리는거라 의미가 없구요.. ㅠㅠ
간단히 말해서 위 이미지로 빨간 영역만 출력할 수 있음 되는거에요.. (세개의 좌표를 이용해서)
빨간삼각형만 따로 이미지로 잘라서 보여주고 이럼 안되구요 ㅎㅎ
라파엘은 벡터형태로 걍 그리는거라 의미가 없구요.. ㅠㅠ
윗글 보시면 만들어 올려 놓았습니다. ^^
수고 하세요. 저는 지금 제가 무지무지 싫어하는 mysql 만지러 가야해서... ㅠㅠㅠㅠ
이만 가보겠습니다.
수고 하세요. 저는 지금 제가 무지무지 싫어하는 mysql 만지러 가야해서... ㅠㅠㅠㅠ
이만 가보겠습니다.
졸리네여 젠장...
졸리네여 젠장...
잠깐 딴거 보고왔는데 이 시간에 댓글 폭주라 깜짝 놀랬네요 ;
언능 주무시길...
언능 주무시길...
안되겠네요 1시간이라두 자야징 에혀~
모닝콜 서비스 해드립니다 한통화에 만원요 ㅎㅎ
안되겠네요 이제라두 자야징 에혀~
주무시고 일어나신줄 알았더니 -_-
ㅎㅎ 주므세요 ~ ㅎㅎ
삼각형 만들어 내기만 하면 되나요? php던 css3이던 상관없이요?
php 로 처리하는건 안될듯 하구요.. css 내지는 자스나 jquery 로 해야할듯한데
삼각형만 만들면 되는게 아니라 이미지에서 특정부분만 보여주는 방식이어야 할것 같아서요..
삼각형만 만들면 되는게 아니라 이미지에서 특정부분만 보여주는 방식이어야 할것 같아서요..
php 는 패치 해야하니깐 좀 힘들것 같네요..
