묻고답하기
(긴급헬프)레이아웃 헤더 스크립트에 자바스크립트 삽입문제 ㅠㅠ
2010.03.06 23:45
안녕하세요.
저는 뭐.. 완전 초보 입니다.^^;
다름 아니라 "이미지 확대기능(이미지 크게보기)"을 사용하기 위해서 위젯을 찾던 중,
대부분 게시판에 업로드된 이미지를 추출해서 뿌려주는 것들 밖에 없길래...
그래서 인터넷에서 소스를 찾아서 적용을 시켜봤습니다.
방식은 테이블을 짜서, 작은 셀을 여러개 두어 그 안에는 작은 썸네일 이미지를 넣고
우측에 넓은 셀을 만들어서.. 썸네일을 누르거나 마우스 온 하면 넓은 셀에 큰 이미지가 보이게 하고 싶었거든요.
전 프로그래밍도 잘 모르고 하긴 합니다만..
우선 <head> 스크립트 안에 자바스크립트로 무언가; 변수라고 하나요? 선언을 해주고, 각 썸네일에 연결을 해주는 방식인데요.
--------------------------------------제가 퍼온소스--------------------------
-------첫 부분 - 레이아웃 헤더 스크립트 부분에 삽입했습니다. (레이아웃- Blooz 3.2)--------------------
<script language=javascript type="text/javascript">
<!--
var img = new Image();
var newWin;
var url = "http://www.lijin.co.jp/xe/img/puppy/sum1-1.jpg"; /* 제일 처음 나올 이미지를 적습니다.*/
function loadImage(fileName, url)
{
this.url = url;
img.src = fileName;
document.preview.src = img.src;
}
function bigImage()
{
newWin = window.open(url, "enlarge", "menubar = 0, toolbar = 0, status = 0, resizable = 1, scrollbars=1, width = 600, height = 400");
}
-->
</script>
</head>
----------두 번째 부분 - Blooz 3.2 레이아웃으로 페이지를 만들어서 BODY 부분에 넣었습니다. (예로 두 개의 썸네일만) ------------------
<table border="0" cellSpacing="2" cellPadding="0">
<tbody>
<tr>
<td height="60" vAlign="center" width="60" align="middle"><a onclick="loadImage('http://www.lijin.co.jp/xe/img/puppy/sum1-1.jpg', 'http://www.lijin.co.jp/xe/img/puppy/sum1-1.jpg')" href="#"><img border="0" src="http://www.lijin.co.jp/xe/img/puppy/sum1-1.jpg" width="56" height="56" editor_component="image_link" /></a></td>
<td height="60" vAlign="center" width="60" align="middle"><a href="#" onClick="loadImage('http://www.lijin.co.jp/xe/img/puppy/sum1-2.jpg', 'http://www.lijin.co.jp/xe/img/puppy/sum1-2.jpg')"><img src="home/puppy/sum1-2.jpg" width="56" height="56" border="0"></a></td>
<td height="60" vAlign="center" width="60" align="middle"> </td>
<td height="300" vAlign="center" rowSpan="5" width="300" align="middle"><a href="javascript: bigImage(" title="큰 이미지보기(사진클릭)"><img src="img/puppy/sum1-1.jpg" name="preview" border=0 width=300 height=300 alt="큰 이미지보기(사진클릭)"></a></td>
</tr>
<tr vAlign="center" align="middle">
<td height="60" width="60"> </td>
<td height="60" width="60"> </td>
<td height="60" width="60"> </td>
</tr>
<tr vAlign="center" align="middle">
<td height="60" width="60"> </td>
<td height="60" width="60"> </td>
<td height="60" width="60"> </td>
</tr>
<tr vAlign="center" align="middle">
<td height="60" width="60"> </td>
<td height="60" width="60"> </td>
<td height="60" width="60"> </td>
</tr>
<tr vAlign="center" align="middle">
<td height="60" width="60"> </td>
<td height="60" width="60"> </td>
<td height="60" width="60"> </td>
</tr>
</tbody>
</table>
제가 컴퓨터에서 소스를 써서 돌려보면, 제대로 잘 되거든요..
근데 자바스크립트를 레이아웃 헤더 스크립트에 넣고, 테이블 소스를 페이지 내용에 넣고 테스트를 해보면
자꾸 페이지 오류가 뜹니다.
썸네일을 클릭하면 우측 넓은셀에 큰 그림이 떠야하는데, 그림은 뜨지 않고
페이지 주소가 http://www.lijin.co.jp/xe/test# 이렇게 뜨면서 페이지 오류가 뜨네요.
모듈명은 test 인데, 계속 test#로 바뀌어서 에러가 뜨는 것도 같구요..
위에 올려드린 소스를 보면 <a href 링크가 #로 걸려있는데.. 그것때문에 그런가 싶기도 하고..
로컬에서는 테스트가 잘되니까 더 미치겠네요 ㅠㅠ
거의 4일동안 해결이 안되서 결국은 고수님들께 질문 올리네요.
도대체 뭐가 잘못된걸까요? ㅠㅠ
확인 위해서 페이지 링크 겁니다. (일본이라서 로딩속도가 좀 느리더래도 이해해주세용..)
http://www.lijin.co.jp/xe/test 입니다.
부탁드립니다. ㅠㅠ 위젯 말고.. 저런식으로 이미지를 확대해서 볼수 있는 기능이 꼭 필요하거든요.
혹시 지금 제가 올린 소스 이외에도 다른 좋은 방법 있으면 알려주세요. ^-^!!!!
추가:::: 방금 로컬에서 테스트를 해봤는데요..
로컬에서는 썸네일을 클릭할 경우 주소가...
이 주소에서 C:\Documents and Settings\sook1\바탕 화면\Untitled-3.html
이렇게 바뀌네요.. file:///C:/Documents%20and%20Settings/sook1/바탕%20화면/Untitled-3.html#
서버에서는 http://www.lijin.co.jp/xe/test -> http://www.lijin.co.jp/xe/test# 이렇게 바뀌구요;;
