묻고답하기
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
원하는위치에 큰 그림 띄우는 방법... 알려주세요..
2002.10.30 16:16
일단 아래 소스를 보시면 이해 하실분들 계시겠죠.
아래 소스는 작은 그림을 클릭하면 큰 그림이 작은 그림 바로 아래에 나타나게 하는 소스 입니다.
자바를 잘 몰라서 어떤 식으로 되는건진 잘 모르겠구요.
제가 원하는건 큰 그림이 원하는곳에(현재는 작은 그림을 기준으로 밑으로 큰 그림이 나옵니다.) 나타나게 하는건데요. 예를 들어 왼쪽 위 모서리를 기준으로 해서 나오게 한다던지 아니면 중앙에 나타나게 한다던지 그럴땐 어떤 부분을 수정해야 하는지 궁금합니다.
===============================================================================================
헤드사이에...
<script language="JavaScript">
<!--
var ie=document.all
var ns=document.layers
var ns6=document.getElementById&&!document.all
function enlarge(which,e){
if (ie||ns6){
crossobj=document.getElementById? document.getElementById("showimage") : document.all.showimage
if (crossobj.style.visibility=="hidden"){
crossobj.style.left=ns6? pageXOffset+e.clientX : document.body.scrollLeft+event.clientX
crossobj.style.top=ns6? pageYOffset+e.clientY : document.body.scrollTop+event.clientY
crossobj.innerHTML='<div id=drag align=right style=background:#FFFFFF><img onClick=closepreview() src=close.gif style=cursor:hand></div><img src="'+which+'">'
crossobj.style.visibility="visible"
}
else
crossobj.style.visibility="hidden"
return false
}
else if (document.layers){
if (document.showimage.visibility=="hide"){
document.showimage.document.write('<a href="#" onMouseover="drag_dropns(showimage)"><img src="'+which+'" border=0></a>')
document.showimage.document.close()
document.showimage.left=e.x
document.showimage.top=e.y
document.showimage.visibility="show"
}
else
document.showimage.visibility="hide"
return false
}
else
return true
}
function closepreview(){
crossobj.style.visibility="hidden"
}
//-->
</script>
<script language="JavaScript1.2">
<!--
var nsx,nsy,nstemp
function drag_dropns(name){
temp=eval(name)
temp.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP)
temp.onmousedown=gons
temp.onmousemove=dragns
temp.onmouseup=stopns
}
function gons(e){
temp.captureEvents(Event.MOUSEMOVE)
nsx=e.x
nsy=e.y
}
function dragns(e){
temp.moveBy(e.x-nsx,e.y-nsy)
return false
}
function stopns(){
temp.releaseEvents(Event.MOUSEMOVE)
}
function drag_drop(e){
if (ie&&dragapproved){
crossobj.style.left=tempx+event.clientX-offsetx
crossobj.style.top=tempy+event.clientY-offsety
}
else if (ns6&&dragapproved){
crossobj.style.left=tempx+e.clientX-offsetx
crossobj.style.top=tempy+e.clientY-offsety
}
return false
}
function initializedrag(e){
if (ie&&event.srcElement.id=="drag"||ns6&&e.target.id=="drag"){
offsetx=ie? event.clientX : e.clientX
offsety=ie? event.clientY : e.clientY
tempx=parseInt(crossobj.style.left)
tempy=parseInt(crossobj.style.top)
dragapproved=true
document.onmousemove=drag_drop
}
}
document.onmousedown=initializedrag
document.onmouseup=new Function("dragapproved=false")
//-->
</script>
바디 사이에
<div id="showimage" style="position:absolute; visibility:hidden; border:1 solid #000000"></div>
<span onClick="return enlarge('kissofgod01.jpg',event)" style="cursor:hand"><img src="kissofgod01t.jpg"></span>
이러케 하면 작은 그림 kissgod01t.jpg 클릭하면 큰 그림 kissgod01.jpg가 뜹니다.
여기서 큰 그림의 위치를 바꿀때 어느 부분을 수정해야 하는지 알려주세요.
이 강좌는 신의키스님 홈페이지 강좌입니다.
아래 소스는 작은 그림을 클릭하면 큰 그림이 작은 그림 바로 아래에 나타나게 하는 소스 입니다.
자바를 잘 몰라서 어떤 식으로 되는건진 잘 모르겠구요.
제가 원하는건 큰 그림이 원하는곳에(현재는 작은 그림을 기준으로 밑으로 큰 그림이 나옵니다.) 나타나게 하는건데요. 예를 들어 왼쪽 위 모서리를 기준으로 해서 나오게 한다던지 아니면 중앙에 나타나게 한다던지 그럴땐 어떤 부분을 수정해야 하는지 궁금합니다.
===============================================================================================
헤드사이에...
<script language="JavaScript">
<!--
var ie=document.all
var ns=document.layers
var ns6=document.getElementById&&!document.all
function enlarge(which,e){
if (ie||ns6){
crossobj=document.getElementById? document.getElementById("showimage") : document.all.showimage
if (crossobj.style.visibility=="hidden"){
crossobj.style.left=ns6? pageXOffset+e.clientX : document.body.scrollLeft+event.clientX
crossobj.style.top=ns6? pageYOffset+e.clientY : document.body.scrollTop+event.clientY
crossobj.innerHTML='<div id=drag align=right style=background:#FFFFFF><img onClick=closepreview() src=close.gif style=cursor:hand></div><img src="'+which+'">'
crossobj.style.visibility="visible"
}
else
crossobj.style.visibility="hidden"
return false
}
else if (document.layers){
if (document.showimage.visibility=="hide"){
document.showimage.document.write('<a href="#" onMouseover="drag_dropns(showimage)"><img src="'+which+'" border=0></a>')
document.showimage.document.close()
document.showimage.left=e.x
document.showimage.top=e.y
document.showimage.visibility="show"
}
else
document.showimage.visibility="hide"
return false
}
else
return true
}
function closepreview(){
crossobj.style.visibility="hidden"
}
//-->
</script>
<script language="JavaScript1.2">
<!--
var nsx,nsy,nstemp
function drag_dropns(name){
temp=eval(name)
temp.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP)
temp.onmousedown=gons
temp.onmousemove=dragns
temp.onmouseup=stopns
}
function gons(e){
temp.captureEvents(Event.MOUSEMOVE)
nsx=e.x
nsy=e.y
}
function dragns(e){
temp.moveBy(e.x-nsx,e.y-nsy)
return false
}
function stopns(){
temp.releaseEvents(Event.MOUSEMOVE)
}
function drag_drop(e){
if (ie&&dragapproved){
crossobj.style.left=tempx+event.clientX-offsetx
crossobj.style.top=tempy+event.clientY-offsety
}
else if (ns6&&dragapproved){
crossobj.style.left=tempx+e.clientX-offsetx
crossobj.style.top=tempy+e.clientY-offsety
}
return false
}
function initializedrag(e){
if (ie&&event.srcElement.id=="drag"||ns6&&e.target.id=="drag"){
offsetx=ie? event.clientX : e.clientX
offsety=ie? event.clientY : e.clientY
tempx=parseInt(crossobj.style.left)
tempy=parseInt(crossobj.style.top)
dragapproved=true
document.onmousemove=drag_drop
}
}
document.onmousedown=initializedrag
document.onmouseup=new Function("dragapproved=false")
//-->
</script>
바디 사이에
<div id="showimage" style="position:absolute; visibility:hidden; border:1 solid #000000"></div>
<span onClick="return enlarge('kissofgod01.jpg',event)" style="cursor:hand"><img src="kissofgod01t.jpg"></span>
이러케 하면 작은 그림 kissgod01t.jpg 클릭하면 큰 그림 kissgod01.jpg가 뜹니다.
여기서 큰 그림의 위치를 바꿀때 어느 부분을 수정해야 하는지 알려주세요.
이 강좌는 신의키스님 홈페이지 강좌입니다.