웹마스터 팁
이미지 갤러리-이미지에 설명이나 이름을 같이 달아줄수 있는..
2004.05.17 09:46
메뉴에 마우스를 올리거나 클릭하면 확대이미지가 보여지는 방식,즉,
이미지갤러리 소스는 이미 공개되어있더군요-
그런데 이미지에 간단한 설명글이나 이름을 달아주는 방법도 병행해주면 좋지않을까 싶어서..
미리보기 페이지 첨부했습니다.참고하시구요..
http://webzang.nahome.org/study/test.htm
참고로 전 스크립트공부는 한적이 없구요^^;;
스크립트는 잘 모르지만 제가 갤러리소스를 응용해보다가
이름 다는 방법을 알게 된거라 설명이 미흡할지 모르겠습니다만 암튼 도움되실거 같아 올립니다..
아래소스에는 확대이미지로 img1.gif,img2.gif,img3.gif 세가지가 사용되었습니다.
1)먼저 <head>와</head>사이에 다음 스크립트를 삽입합니다.
<script>
<!--
function transphoto(place) {
if (place==1)
{photo.src="img1.gif";txt.value="이미지1";}//확대이미지 및 이미지 설명이 들어갑니다.
if (place==2)
{photo.src="img2.gif";txt.value="이미지2";}//확대이미지 및 이미지 설명이 들어갑니다.
if (place==3)
{photo.src="img3.gif";txt.value="이미지3";}//확대이미지 및 이미지 설명이 들어갑니다.
}
//-->
</script>
2)그리고 <body>와</body>사이에 다음소스를 삽입합니다.
<a href="#" onmouseover=transphoto(1);><img src="img1.gif" width="50" height="50" border="1"></a>
<a href="#" onmouseover=transphoto(2);><img src="img2.gif" width="50" height="50" border="1"></a>
<a href="#" onmouseover=transphoto(3);><img src="img3.gif" width="50" height="50" border="1"></a>
<br><img src="img1.gif" width="150" height="150" border="1" name="photo"><br>
<input type="button" name="txt" value=" " style="background-color:white; border-width:0;">
이거면 다 된겁니다. 간단하죠?
설명을 덧붙이겠습니다.
1)의 photo.src=부분은 확대이미지의 경로입니다.txt.value=부분은 확대이미지에 대한 설명이나 이름을 넣구요.
2)의 소스에서 name="photo"부분이 있죠? 이 이름이 붙여진 이미지에 확대이미지가 뜨게 됩니다.
즉 html로 이미지의 이름을 붙여준다음 스크립트에서 photo.src="이미지경로"로 확대이미지를 호출하는겁니다.
호출방법은 transphoto라고 정의해준 스크립트를 사용하되,
스크립트에서 place==숫자 부분에서 정해둔 숫자를 onmouseover=transphoto(숫자)에 적용하는거죠.
마우스 오버가 아니라 클릭해서 하고싶으시면 html부분에서 mouseover대신 onclick으로 바꾸시면 됩니다.
그리고 저는 편의상 html부분에서 작은 이미지로 확대이미지와 같은이미지를 사용한거구요, 원하는 이미지를
넣으시면 됩니다.
그리고 중요한 이미지 설명부분!!
html에 <input>이 사용된게 보이시죠? 여기에도 name="txt"라고 씌어져있습니다.
확대이미지를 호출하는것과 같은방법으로 스크립트에서 txt.value="이미지이름이나 설명"을 넣어주면 되는겁니다.
input type=text로 할수도 있는데 굳이 type=button을 쓴이유는,
페이지를 새로고침했을때 확대이미지는 초기이미지로 돌아가지만 txt에 뿌려진 설명은 안 없어지더군요-
(input type=text로 테스트해보시면 압니다. 아래에 미리보기페이지에서 마우스오버해보신후 새로고침해보세요.)
그래서 굳이 button으로 만들어서 value=" " 이렇게 공백값을 넣어준겁니다. 편법이죠^^;;
그러다보니 style로 버튼의 테두리를 없애야 했구요^^;;
굳이 이럴필요없다면 input을 type=text로 해도 됩니다.그럼 style을 넣을 필요도 없구요-
더 좋은 방법을 알고 계신분도 있으실겁니다^^;; 저야 스크립트 공부한 사람이 아니라서^^;;
설명이 미흡하다 싶으시면
http://webzang.nahome.org 에 질문주셔도 됩니다^^
이미지갤러리 소스는 이미 공개되어있더군요-
그런데 이미지에 간단한 설명글이나 이름을 달아주는 방법도 병행해주면 좋지않을까 싶어서..
미리보기 페이지 첨부했습니다.참고하시구요..
http://webzang.nahome.org/study/test.htm
참고로 전 스크립트공부는 한적이 없구요^^;;
스크립트는 잘 모르지만 제가 갤러리소스를 응용해보다가
이름 다는 방법을 알게 된거라 설명이 미흡할지 모르겠습니다만 암튼 도움되실거 같아 올립니다..
아래소스에는 확대이미지로 img1.gif,img2.gif,img3.gif 세가지가 사용되었습니다.
1)먼저 <head>와</head>사이에 다음 스크립트를 삽입합니다.
<script>
<!--
function transphoto(place) {
if (place==1)
{photo.src="img1.gif";txt.value="이미지1";}//확대이미지 및 이미지 설명이 들어갑니다.
if (place==2)
{photo.src="img2.gif";txt.value="이미지2";}//확대이미지 및 이미지 설명이 들어갑니다.
if (place==3)
{photo.src="img3.gif";txt.value="이미지3";}//확대이미지 및 이미지 설명이 들어갑니다.
}
//-->
</script>
2)그리고 <body>와</body>사이에 다음소스를 삽입합니다.
<a href="#" onmouseover=transphoto(1);><img src="img1.gif" width="50" height="50" border="1"></a>
<a href="#" onmouseover=transphoto(2);><img src="img2.gif" width="50" height="50" border="1"></a>
<a href="#" onmouseover=transphoto(3);><img src="img3.gif" width="50" height="50" border="1"></a>
<br><img src="img1.gif" width="150" height="150" border="1" name="photo"><br>
<input type="button" name="txt" value=" " style="background-color:white; border-width:0;">
이거면 다 된겁니다. 간단하죠?
설명을 덧붙이겠습니다.
1)의 photo.src=부분은 확대이미지의 경로입니다.txt.value=부분은 확대이미지에 대한 설명이나 이름을 넣구요.
2)의 소스에서 name="photo"부분이 있죠? 이 이름이 붙여진 이미지에 확대이미지가 뜨게 됩니다.
즉 html로 이미지의 이름을 붙여준다음 스크립트에서 photo.src="이미지경로"로 확대이미지를 호출하는겁니다.
호출방법은 transphoto라고 정의해준 스크립트를 사용하되,
스크립트에서 place==숫자 부분에서 정해둔 숫자를 onmouseover=transphoto(숫자)에 적용하는거죠.
마우스 오버가 아니라 클릭해서 하고싶으시면 html부분에서 mouseover대신 onclick으로 바꾸시면 됩니다.
그리고 저는 편의상 html부분에서 작은 이미지로 확대이미지와 같은이미지를 사용한거구요, 원하는 이미지를
넣으시면 됩니다.
그리고 중요한 이미지 설명부분!!
html에 <input>이 사용된게 보이시죠? 여기에도 name="txt"라고 씌어져있습니다.
확대이미지를 호출하는것과 같은방법으로 스크립트에서 txt.value="이미지이름이나 설명"을 넣어주면 되는겁니다.
input type=text로 할수도 있는데 굳이 type=button을 쓴이유는,
페이지를 새로고침했을때 확대이미지는 초기이미지로 돌아가지만 txt에 뿌려진 설명은 안 없어지더군요-
(input type=text로 테스트해보시면 압니다. 아래에 미리보기페이지에서 마우스오버해보신후 새로고침해보세요.)
그래서 굳이 button으로 만들어서 value=" " 이렇게 공백값을 넣어준겁니다. 편법이죠^^;;
그러다보니 style로 버튼의 테두리를 없애야 했구요^^;;
굳이 이럴필요없다면 input을 type=text로 해도 됩니다.그럼 style을 넣을 필요도 없구요-
더 좋은 방법을 알고 계신분도 있으실겁니다^^;; 저야 스크립트 공부한 사람이 아니라서^^;;
설명이 미흡하다 싶으시면
http://webzang.nahome.org 에 질문주셔도 됩니다^^
댓글 0
| 제목 | 글쓴이 | 날짜 |
|---|---|---|
throttle-me를 이용한 계정 트래픽 나타내기
[39]
 | 旻天 | 2003.11.27 |
| 제로보드회원의 포인트 랭킹 체크하기 sql 정리 [4] | 한꼬마 | 2003.11.26 |
| 한꼬마의 제로보드 이용법 (sql로 테이블 호출) [2] | 한꼬마 | 2003.11.26 |
|
[Lotto 6/45] 로또 추첨 구현하기~
[5]
| 전원주 | 2003.11.21 |
| 한꼬마의 제로보드 활용방법 (로그인 값 알아 보기) [3] | 한꼬마 | 2003.11.20 |
|
회원 포인트 랭킹(중복 -_-a)
[4]
| weky | 2003.11.15 |
|
제로보드회원의 포인트 랭킹 체크하기
[13]
| 전원주 | 2003.11.15 |
| 지금은 시스템 점검중 만들기... [8] | zentoo.com | 2003.11.11 |
| 접속자의 IP를 화일로 저장(기능추가) [27] | 전원주 | 2003.11.06 |
| 호스팅업체에서 GD를 지원하는지 여부를 알 수 있게해주는 소스 [12] | Wizard | 2003.11.05 |
|
홈페이지 관리자 모드 구축하기 (HTTP 인증, 중복 맞음)
[10]
| 9000㎒ | 2003.11.01 |
| include, onload, <span id=...> 다계층메뉴 활용 강좌 [2] | 김병희 | 2003.10.25 |
| 신문기사 긁어오기 [28] | horizon | 2003.10.20 |
| 공지사항|일기장 4강 - notice.php 간단한 글보이기 | 시루바 | 2003.10.16 |
| 최신인기가요 순위 한방에 뽑아오기 [10] | 제누스 | 2003.10.16 |
| 알기쉬운 웹용 MySQL 관리도구, phpMyAdmin 설치하기 [10] | 허창원 | 2003.10.11 |
|
MSN Messenger Class -
| HungryMania | 2003.10.10 |
| 공지사항|일기장 3장 write_ok.php //간단한 입력쿼리문//수정 [5] | 시루바 | 2003.10.08 |
|
내 홈페이지의 방문자 어디서 접속했을까 알아봅시다
[21]
| 버찌소년 | 2003.10.08 |
| 공지사항|일기장 프로그램 2장:코딩구조와write.php [2] | 시루바 | 2003.10.02 |