웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
[초간단 자바스크립트!] 이미지 드래그하기..~~
2003.11.02 19:44
//요즘들어... 하는 일 없이 바쁘네요...-_-;; 낮잠자랴... 스타하랴..
ㅋ.... 어쨌든... 필요없는 소스하나 또 올립니다... 이미지 드래그하는 건데요...
응용이 트리 장식에서... 아바타 코디까지..=_=;; 그림이 이뻐야지...ㅋ//
1. head사이에 넣으세요.
<STYLE>
.drag
{
CURSOR: hand; POSITION: relative
}
</STYLE>
2. body에 넣으세요.
<SCRIPT language=JavaScript1.2>
<!--
var dragapproved=false
var z,x,y
function move(){
if (event.button==1&&dragapproved){
z.style.pixelLeft=temp1+event.clientX-x
z.style.pixelTop=temp2+event.clientY-y
return false
}
}
function drags(){
if (!document.all)
return
if (event.srcElement.className=="drag"){
dragapproved=true
z=event.srcElement
temp1=z.style.pixelLeft
temp2=z.style.pixelTop
x=event.clientX
y=event.clientY
document.onmousemove=move
}
}
document.onmousedown=drags
document.onmouseup=new Function("dragapproved=false")
//-->
</SCRIPT>
<img src="그림"><!--멈춰 있는 그림>
<!--여기 부터는 드레그가 가능한 이미지-->
<IMG class=drag src="그림1">
<IMG class=drag src="그림2">
<IMG class=drag src="그림3">
미리보기 : http://myhome.naver.com/frankpkg/imagedrag.htm
(그림이 X표 나니까요.. 오른 쪽... 세 X를... 젤 왼쪽거 위에 드래그 해보세요...
되죠? 이런식이라고생각하세요...-0-;; 마땅한 그림이 없어요...)
//헴... 간단하네요...-_-;; 그럼 잘쓰세요...//
ㅋ.... 어쨌든... 필요없는 소스하나 또 올립니다... 이미지 드래그하는 건데요...
응용이 트리 장식에서... 아바타 코디까지..=_=;; 그림이 이뻐야지...ㅋ//
1. head사이에 넣으세요.
<STYLE>
.drag
{
CURSOR: hand; POSITION: relative
}
</STYLE>
2. body에 넣으세요.
<SCRIPT language=JavaScript1.2>
<!--
var dragapproved=false
var z,x,y
function move(){
if (event.button==1&&dragapproved){
z.style.pixelLeft=temp1+event.clientX-x
z.style.pixelTop=temp2+event.clientY-y
return false
}
}
function drags(){
if (!document.all)
return
if (event.srcElement.className=="drag"){
dragapproved=true
z=event.srcElement
temp1=z.style.pixelLeft
temp2=z.style.pixelTop
x=event.clientX
y=event.clientY
document.onmousemove=move
}
}
document.onmousedown=drags
document.onmouseup=new Function("dragapproved=false")
//-->
</SCRIPT>
<img src="그림"><!--멈춰 있는 그림>
<!--여기 부터는 드레그가 가능한 이미지-->
<IMG class=drag src="그림1">
<IMG class=drag src="그림2">
<IMG class=drag src="그림3">
미리보기 : http://myhome.naver.com/frankpkg/imagedrag.htm
(그림이 X표 나니까요.. 오른 쪽... 세 X를... 젤 왼쪽거 위에 드래그 해보세요...
되죠? 이런식이라고생각하세요...-0-;; 마땅한 그림이 없어요...)
//헴... 간단하네요...-_-;; 그럼 잘쓰세요...//
댓글 8
-
젤군
2003.11.02 20:35
우와~ 신기하네요~ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 엑스의 압박이 심하지만 ~ㅋㅋ -
☺BBeak!☺
2003.11.03 19:45
인형 옷입히기 등에 응용하면 좋겠네요 ^^ -
Pe-i
2003.11.03 21:07
아, 예전에 그림몇장 놓고 집배경에 집 꾸미는 그런거 있었지요.
요즘 찾아보니까 없던데...
유용하네요! -
리틀이
2004.01.03 20:00
아~ 인형옷입히기.. 플래시 말고는 이런걸로 되어있는거 봤어요~ -
세상이꿈꾼다
2015.04.22 09:20
시간이 많이 지났지만.. ㅠㅠ 혹시 어디서 보셨는지 알 수 있을까요?.?
-
그냥이렇게。
2004.02.04 09:16
응용해서 div태그로 돌려서 윈도우창 만들기도 할 수 있겠네요... 추천 꾹! -
그냥이렇게。
2004.02.04 09:20
div태그가 되네요.. 쓸데 없는 잡담 죄송... -
백승봉
2004.05.25 21:01
태그가 <IMG class=drag src="그림주소"> 이거네요?^^
제목 | 글쓴이 | 날짜 |
---|---|---|
[초간단 자바스크립트(강의)!] 입력박스에 입력한 주소로 이동하기... | ∑Ztxy | 2003.09.27 |
[초간단 자바스크립트!] 홈페이지에 FTP 폼 넣기?! [10] | ∑Ztxy | 2003.09.29 |
게시판 스킨에 프린트 버튼 추가하기 [3] | PHASE | 2003.09.30 |
개판 오분전 만년달력......ㅡ,.ㅡ [4] | 미친개 | 2003.10.08 |
[초간단 자바스크립트!] 날짜 카운터! 커플홈에 강추!! [15] | ∑Ztxy | 2003.10.08 |
개판 오분전 - 이미지 뷰에 관한 한가지 힌트 [5] | 미친개 | 2003.10.11 |
새창 띄운후 부모창 확인없이 닫기... [4] | PHASE | 2003.10.12 |
플래시 크기 바꾸기 [IE/NS 겸용] [4] | teslaMINT | 2003.10.13 |
[초간단 자바스크립트!] 트랜지션 공지사항!! | ∑Ztxy | 2003.10.13 |
스물을 세면 죽음이야~~~ [20] | 미친개 | 2003.10.14 |
[초간단 자바스크립트!] 자바로 플래시 따라하기! [3] | ∑Ztxy | 2003.10.15 |
더 이상의 필터링은 없다!!! [10] | 미친개 | 2003.10.26 |
식대 계산기... ^^ [3] | 김주형 | 2003.10.27 |
클릭하면 홈페이지를 시작페이지로 하는 소스... [7] | 젤군 | 2003.10.28 |
마우스 이벤트 발생시 문서 상,하단으로 이동 [3] | RedEye(kaist) | 2003.10.30 |
[초간단 자바스크립트!] 이미지 드래그하기..~~ [8] | ∑Ztxy | 2003.11.02 |
자바스크립트로 윈도우 흉내내기 (?) [15] | 뒹굴리스트 | 2003.11.03 |
자바스크립트로 작성한 그림맞추기 퍼즐게임 [2] | 김별 | 2003.11.05 |
정말 멋있는 글자 변환 스크립트 [12] | sythesis | 2003.11.07 |
날짜카운터 숫자로만 입력하자. [3] | TechnoKevin™ | 2003.11.08 |