묻고답하기
그림을 자르는 태그가 존재합니까?
2002.08.23 14:42
HTML 이든 CSS-p 든간에 문서상 옵션으로 그림의 일부분을 잘라 보여줄수있을까요?
┌─────────────────┐
│ │ │
│ │ │
│ A │ B │
│ │ │
│ │ │
└─────────────────┘
위와같은 그림 (파일은 한개입니다) 을 A 만 보여주거나. (마치 A 만 있는 파일처럼)
B 만 보여주는 방법이 있습니까?.
물론 포샾에서 자르면되겠지만.. 그림이 외부에서 받아내며 자주 바뀝니다.
┌─────────────────┐
│ │ │
│ │ │
│ A │ B │
│ │ │
│ │ │
└─────────────────┘
위와같은 그림 (파일은 한개입니다) 을 A 만 보여주거나. (마치 A 만 있는 파일처럼)
B 만 보여주는 방법이 있습니까?.
물론 포샾에서 자르면되겠지만.. 그림이 외부에서 받아내며 자주 바뀝니다.
댓글 4
-
마루
2002.08.24 11:17
-
명랑폐인™
2002.08.23 15:13
css를 이용하여 레이어를 쓴다면 가능할것 같은데요...
이미지 크기와 같은 레이어를 만들고, z-index를 이용하여 상위 a레이어와 b레이어를 각각 만들어 b레이어의 visiablity를 조정하면 될것 같군요...
...시간이 없어서 설명이 저정도밖에는...그럼.. -
마루
2002.08.23 16:02
자문 자답. -_-;
페인님 답변 감사드립니다. 결국 같은 원리로 해결하였습니다. 테이블에 배경으로 넣고 절대값을 이용해 그림의 위치를 변환하면 되는것입니다.
테이블의 크기가 보여주는 그림의 크기가 됩니다.
추가 질문 > 혹시 여기서 배경의 절대값을 변경시키는 DHTML 소스 가지고 계시면 좀 얻을수 없을까요? -
steelheart
2002.08.23 16:11
자른다기 보다는... 좀 다른 것이긴 해도... 선택영역만 보여주는 스타일은 존재합니다...
(그런데 단점이 좀 있습니다. 직접 찾아 보세요...)
<img id="sampleimage" src="http://myhome.hanafos.com/~dfboss/photo/photo-1.jpg" style="position:absolute; left:10px; top:50px;">
<button onclick="sampleimage.style.clip='rect(100 300 300 100)';">Shrink</button>
<button onclick="sampleimage.style.clip='rect(auto auto auto auto)';">Expand</button>
아니면 명랑폐인님 말씀대로 레이어 안에 이미지를 넣고 레이어의 크기를 줄여보는 것도
좋을 듯 합니다. 레이어가 두개까진 필요없구요... 이미지를 담는 컨테이너 레이어
하나만 있으면 됩니다... 이쪽이 더 괜찮은 방법처럼 보이는군요...
<div id="container" style="overflow:hidden; width:100px; height:100px;">
<img src="http://myhome.hanafos.com/~dfboss/photo/photo-1.jpg" style="position:relative; left:200px; top:200px;">
</div>
div container의 width, height는 그림의 크기, img 태그의 left, top 스타일은 그림에서
잘라낼 왼쪽 및 위쪽 여백을 나타냅니다...
참고로 샘플이미지는 Radio님의 방 모습이랍니다 -_-;;; 불펌해서 죄송 (__);
저는 이렇게 해보았는데 님의 답변이 좀더 직관적인듯하군요.
<table style="background-image:url('back.gif'); background-position:150px 700px;" width="150" height="150"><tr><td width="898"><p> </p></td></tr></table>
위의 예제에서 버튼으로 구현한 DHTML (맞죠? :) 에 대한 필요성을 부쩍 느끼고 있습니다. DHTML 로 검색해도 그다지 좋은 자료는 보질 못했습니다. 불편하지 않으시면. 사이트나 책을 추천 부탁드립니다.