웹마스터 팁
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
제목 | 글쓴이 | 날짜 |
---|---|---|
플래시 Embed패치(이올라스) 충돌에 의한 파일첨부버튼 해결법 [2] | Guns | 2008.03.18 |
로그인 풀림현상 원인 파악 [3] | 남국 | 2008.03.19 |
업데이트 후 댓글 입력 창이 안 나올때...(댓글 에디터) | 수지보더 | 2008.03.20 |
상담/신청 (쓰기만 가능한 게시판) 만들기 [10] | mmx900 | 2008.03.20 |
좁은폭의 레이아웃을 쓰시는 분들을 위하여 (게시판 제목부분 깔끔하게 만들기) [5] | gajagu | 2008.03.20 |
''권한이 없습니다'' 라는 문구를 조금 더 부드럽게 바꾸기 [3] | RainSky | 2008.03.21 |
사이트 주소로 접속했을때 XE폴더로 이동하기 #2 [15] | 베니 | 2008.03.28 |
로그인풀림방지 - 자동 www 붙이는 다른 방법 [23] | RainSky | 2008.03.28 |
양력/음력DB 홈페이지에 사용하기 [2] | 감뿌리 | 2008.03.29 |
탭 형태 문서출력에서 목록수 지정하기. [3] | Zerode | 2008.03.31 |
카테고리부분의 너비조절하기 [3] | gajagu | 2008.04.01 |
갓난아기 상태의 제로보드 유저를 위한 팁. [2] | font | 2008.04.01 |
게시판을 외부레이아웃에 넣기 [4] | 박봉수610 | 2008.04.03 |
환율 계산 팝업창 띄우기 [9] | RainSky | 2008.04.03 |
플래시로 페이지에 랜덤 이미지 돌리기 [3] | ☜ TeRy ☞ | 2008.04.04 |
최근 이미지 목록 + 라이트박스 [6] | 베니 | 2008.04.04 |
사각박스 코너를 이미지없이 둥글게 만드는법 [5] | 느까끼 | 2008.04.07 |
외부페이지에서 매개변수 사용하기 [2] | JnCsoft | 2008.04.07 |
플래시 컨트럴 활성화하라는 메시지 없애기 [4] | 달구벌 | 2008.04.08 |
레이아웃수정시 참고할 zbXe레이아웃스킨의 css와 layout 상관관계(1.0.0 기본스킨) [21] | 갯가 | 2008.04.08 |