웹마스터 팁
이미지 갤러리-이미지에 설명이나 이름을 같이 달아줄수 있는..
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
| 제목 | 글쓴이 | 날짜 |
|---|---|---|
| 간단한 감추기/펼치기 스크립트 (태터툴즈의 more 기능) [5] | 나이시스 | 2004.05.28 |
| 왔다 갔다 이미지 스크롤 [3] | 컴도미 | 2004.05.25 |
| 동영상을 일반 버튼으로 제어 | ☺심심 | 2004.05.23 |
| 배너를 모자이크로 슬라이드한다! [13] | ☺심심 | 2004.05.17 |
| 이미지 갤러리-이미지에 설명이나 이름을 같이 달아줄수 있는.. | webzang | 2004.05.17 |
| 클릭하거나, 바탕을 더블클릭하면 나타나는 작은(크기조절가능) 메뉴 | ☺심심 | 2004.05.17 |
| 상태창에 머문시간 보여주기 [5] | ☺심심 | 2004.05.05 |
| 특정위치에 떠있는 레이어 (슬라이딩 애드콘) - 노프레임홈에서의 문제해결 [8] | 검미르 | 2004.05.03 |
| 접속할때마다 다른 이미지 띄우기 [8] | ▩윤미 | 2004.04.30 |
| 그림파일없이 바꾸는 그라이데이션 배경색 [3] | ▩윤미 | 2004.04.30 |
| 웹페이지에 테두리 두르기 [5] | ▩윤미 | 2004.04.30 |
| 로딩 100% 후 페이지 이동시키기 [1] | ▩윤미 | 2004.04.30 |
| 특정부분을 원클릭에 copy 또는 선택하기 [3] | ▩윤미 | 2004.04.30 |
| [iframe:아이프레임] 내용에 맞게 사이즈 조절하기 한번입력으로 끝.[다른방법:중복아닌듯] [45] | beMax | 2004.04.23 |
| (For 초보)원클릭으로 여러프레임 컨트롤하기 [2] | 쉬드 | 2004.04.19 |
| 자기가 살아온 시간 구하기.. 데스크탑에 나타내기 [4] | kein23 | 2004.04.14 |
| 브라우저 버젼별 다른 페이지 보여주기 [2] | Kuldahar | 2004.04.13 |
| 바보같은 MS의 parseInt 버그. [4] | 김관석 | 2004.04.09 |
| XP계열의 방문자 컴에서 ClearType 효과 사용여부 확인 [4] | YeUPy | 2004.04.04 |
| 팝업공지창 2개이상 띄우기(시간제한 가능) [8] | lemin | 2004.03.23 |