스크립트를 이용해서 클릭했을 때 큰그림이 나오는걸 한번 해보죠.
요즘 그림게시판같은걸 보면 클릭을 하면 큰그림나오고.다시 그림을 클릭하면 없어지고
태그피아의 갤러리 방 처럼....^^;; 근데 요거하구는 엄청 다르답니다. 갤러리방은 자동으로
그림 크기가 맞춰지지만 요건 직접 크기를 맞춰야 하니까요..^^;;
그러죠? 아주 간단하게 만들수가있습니다. 이중으로 html을 따로 만들지 않아도 되구요.
일단 <head>와 </head> 사이에 아래 소스를 넣습니다.
<script language="JavaScript">
var win1Open
= null
function displayImage(picName, windowName,
windowWidth, windowHeight){
return
window.open(picName,windowName,"toolbar=no,scrollbars=no,resizable=no,width=" +
(parseInt(windowWidth)+20) + ",height=" + (parseInt(windowHeight)+15))
}
function winClose(){
if(win1Open != null)
win1Open.close()
}
function doNothing(){}
</script>
<script language="JavaScript1.1">
function
displayImage(picName, windowName, windowWidth, windowHeight){
var winHandle =
window.open("" ,windowName,"toolbar=no,scrollbars=no,resizable=no,width=" +
windowWidth + ",height=" + windowHeight)
if(winHandle != null){
var
htmlString =
"<html><head><title>Picture</title></head>"
htmlString += "<body leftmargin=0 topmargin=0 marginwidth=0
marginheight=0>"
htmlString += "<a
href=javascript:window.close()><img src=" + picName + " border=0
alt=닫기></a>"
htmlString +=
"</body></html>"
winHandle.document.open()
winHandle.document.write(htmlString)
winHandle.document.close()
}
if(winHandle != null) winHandle.focus()
return
winHandle
}
</script>
닫기 라는 글씨는 새 창으로 뜬 그림 위에 마우스를 올리면 뜨는 툴팁의 내용입니다.
아래 400, 300 수치는 새 창이 열렸을때의 크기입니다. 원래의 이미지 크기를 지정하세요.
두번째 img의 271, 200은 화면상에 보이는 크기입니다. 클릭하게되면 위 400,300 사이즈의 크기로 뜨겠죠.
<a href="javascript:doNothing()" onClick="win1Open=displayImage('http://oxtag.com/html/img/newyear.gif', 'popWin1', '400', '300')" onMouseOver="window.status='Click to display picture'; return true;" onMouseOut="window.status=''" onfocus=this.blur()>
<img src="http://oxtag.com/html/img/newyear.gif" border="0" alt="새해 복 많이 받으세요" width="271" height="200"></a>
이런식으로 얼마든지 추가할 수가 있습니다. 원래 보이는건 그림을 저런식으로
좀 줄여놓는 것이 좋습니다. 테이블 태그를 써서 여러장의 그림을 셀마다 넣구
링크하면 갤러리 방을 만들 수 있겠죠.
아래 소스를 복사해서 태그연습장에 붙여서 보세요.
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr">
<title>그림을 클릭해봐</title>
<script language="JavaScript">
var win1Open = null
function displayImage(picName, windowName, windowWidth, windowHeight){
return window.open(picName,windowName,"toolbar=no,scrollbars=no,resizable=no,width="
+ (parseInt(windowWidth)+20) + ",height=" +
(parseInt(windowHeight)+15))
}
function winClose(){
if(win1Open != null) win1Open.close()
}
function doNothing(){}
</script>
<script language="JavaScript1.1">
function displayImage(picName, windowName, windowWidth, windowHeight){
var winHandle = window.open("" ,windowName,"toolbar=no,scrollbars=no,resizable=no,width="
+ windowWidth + ",height=" + windowHeight)
if(winHandle != null){
var htmlString = "<html><head><title>Picture</title></head>"
htmlString += "<body leftmargin=0 topmargin=0 marginwidth=0 marginheight=0>"
htmlString += "<a href=javascript:window.close()><img src="
+ picName + " border=0 alt=닫기></a>"
htmlString += "</body></html>"
winHandle.document.open()
winHandle.document.write(htmlString)
winHandle.document.close()
}
if(winHandle != null) winHandle.focus()
return winHandle
}
</script>
</head>
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<a href="javascript:doNothing()" onClick="win1Open=displayImage('http://oxtag.com/html/img/newyear.gif', 'popWin1', '400', '300')" onMouseOver="window.status='Click to display picture'; return true;" onMouseOut="window.status=''" onfocus=this.blur()>
<img src="http://oxtag.com/html/img/newyear.gif" border="0" alt="새해 복 많이 받으세요" width="271" height="200"></a>
</body>
</html>
요즘 그림게시판같은걸 보면 클릭을 하면 큰그림나오고.다시 그림을 클릭하면 없어지고
태그피아의 갤러리 방 처럼....^^;; 근데 요거하구는 엄청 다르답니다. 갤러리방은 자동으로
그림 크기가 맞춰지지만 요건 직접 크기를 맞춰야 하니까요..^^;;
그러죠? 아주 간단하게 만들수가있습니다. 이중으로 html을 따로 만들지 않아도 되구요.
일단 <head>와 </head> 사이에 아래 소스를 넣습니다.
<script language="JavaScript">
var win1Open
= null
function displayImage(picName, windowName,
windowWidth, windowHeight){
return
window.open(picName,windowName,"toolbar=no,scrollbars=no,resizable=no,width=" +
(parseInt(windowWidth)+20) + ",height=" + (parseInt(windowHeight)+15))
}
function winClose(){
if(win1Open != null)
win1Open.close()
}
function doNothing(){}
</script>
<script language="JavaScript1.1">
function
displayImage(picName, windowName, windowWidth, windowHeight){
var winHandle =
window.open("" ,windowName,"toolbar=no,scrollbars=no,resizable=no,width=" +
windowWidth + ",height=" + windowHeight)
if(winHandle != null){
var
htmlString =
"<html><head><title>Picture</title></head>"
htmlString += "<body leftmargin=0 topmargin=0 marginwidth=0
marginheight=0>"
htmlString += "<a
href=javascript:window.close()><img src=" + picName + " border=0
alt=닫기></a>"
htmlString +=
"</body></html>"
winHandle.document.open()
winHandle.document.write(htmlString)
winHandle.document.close()
}
if(winHandle != null) winHandle.focus()
return
winHandle
}
</script>
닫기 라는 글씨는 새 창으로 뜬 그림 위에 마우스를 올리면 뜨는 툴팁의 내용입니다.
아래 400, 300 수치는 새 창이 열렸을때의 크기입니다. 원래의 이미지 크기를 지정하세요.
두번째 img의 271, 200은 화면상에 보이는 크기입니다. 클릭하게되면 위 400,300 사이즈의 크기로 뜨겠죠.
<a href="javascript:doNothing()" onClick="win1Open=displayImage('http://oxtag.com/html/img/newyear.gif', 'popWin1', '400', '300')" onMouseOver="window.status='Click to display picture'; return true;" onMouseOut="window.status=''" onfocus=this.blur()>
<img src="http://oxtag.com/html/img/newyear.gif" border="0" alt="새해 복 많이 받으세요" width="271" height="200"></a>
이런식으로 얼마든지 추가할 수가 있습니다. 원래 보이는건 그림을 저런식으로
좀 줄여놓는 것이 좋습니다. 테이블 태그를 써서 여러장의 그림을 셀마다 넣구
링크하면 갤러리 방을 만들 수 있겠죠.
아래 소스를 복사해서 태그연습장에 붙여서 보세요.
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr">
<title>그림을 클릭해봐</title>
<script language="JavaScript">
var win1Open = null
function displayImage(picName, windowName, windowWidth, windowHeight){
return window.open(picName,windowName,"toolbar=no,scrollbars=no,resizable=no,width="
+ (parseInt(windowWidth)+20) + ",height=" +
(parseInt(windowHeight)+15))
}
function winClose(){
if(win1Open != null) win1Open.close()
}
function doNothing(){}
</script>
<script language="JavaScript1.1">
function displayImage(picName, windowName, windowWidth, windowHeight){
var winHandle = window.open("" ,windowName,"toolbar=no,scrollbars=no,resizable=no,width="
+ windowWidth + ",height=" + windowHeight)
if(winHandle != null){
var htmlString = "<html><head><title>Picture</title></head>"
htmlString += "<body leftmargin=0 topmargin=0 marginwidth=0 marginheight=0>"
htmlString += "<a href=javascript:window.close()><img src="
+ picName + " border=0 alt=닫기></a>"
htmlString += "</body></html>"
winHandle.document.open()
winHandle.document.write(htmlString)
winHandle.document.close()
}
if(winHandle != null) winHandle.focus()
return winHandle
}
</script>
</head>
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<a href="javascript:doNothing()" onClick="win1Open=displayImage('http://oxtag.com/html/img/newyear.gif', 'popWin1', '400', '300')" onMouseOver="window.status='Click to display picture'; return true;" onMouseOut="window.status=''" onfocus=this.blur()>
<img src="http://oxtag.com/html/img/newyear.gif" border="0" alt="새해 복 많이 받으세요" width="271" height="200"></a>
</body>
</html>
반응형
'인터넷정보' 카테고리의 다른 글
| 브라우저 창 종합 (0) | 2007.10.17 |
|---|---|
| 브라우저 돌리기.. (0) | 2007.10.17 |
| 브라우저 돌리기.. (0) | 2007.10.17 |
| 브라우저 돌리기 (0) | 2007.10.17 |
| 브라우저 돌리기 (0) | 2007.10.17 |
| 작은 그림 클릭시 큰 그림이 나오게하자.(갤러리방) (0) | 2007.10.17 |
| 크로스마우스 만들기 (0) | 2007.10.17 |
| 크로스마우스 만들기 (0) | 2007.10.17 |
| 그림이 아래로 떨어지게 하는 효과2 (0) | 2007.10.17 |
| 그림이 아래로 떨어지게 하는 효과2 (0) | 2007.10.17 |