묻고답하기
작은 이미지에 마우스 올려놓으면 다른곳에 큰 이미지 보여주고싶어요
2003.12.05 13:20
<table cellpadding=0 cellspacing=0 border=1 align=center>
<tr>
<td rowspan=2 height=200 width=200 align=center>큰이미지
(기본은 1의 이미지)</td>
<td height=100 width=100 align=center>1</td>
<td height=100 width=100 align=center>2</td>
<td height=100 width=100 align=center>3</td>
</tr>
<tr>
<td height=100 width=100 align=center>4</td>
<td height=100 width=100 align=center>5</td>
<td height=100 width=100 align=center>6</td>
</tr>
</table>
┌──┬─┬─┬─┐
│큰 │ │ │ │ 1 2 3
│그 ├─┼─┼─┤
│림 │ │ │ │ 4 5 6
└──┴─┴─┴─┘
위와 같이 테이블을 만들었구요..
1,2,3,4,5,6엔 각각 가로 세로 100픽셀의 이미지가 들어가있어요..
큰이미지(가로 세로 200)의 위치에는 기본으로 1의 큰이미지가 들어가구요
마우스를 2로 가져가면 큰이미지가 2의 큰 이미지로 바뀌고
마우스를 3로 가져가면 큰이미지가 3의 큰 이미지로 바뀌게 하고 싶은데요
html은 하겠는데.. 자바스크립트에 대해 전혀 몰라서요..
도움 부탁드립니다 (__)
<tr>
<td rowspan=2 height=200 width=200 align=center>큰이미지
(기본은 1의 이미지)</td>
<td height=100 width=100 align=center>1</td>
<td height=100 width=100 align=center>2</td>
<td height=100 width=100 align=center>3</td>
</tr>
<tr>
<td height=100 width=100 align=center>4</td>
<td height=100 width=100 align=center>5</td>
<td height=100 width=100 align=center>6</td>
</tr>
</table>
┌──┬─┬─┬─┐
│큰 │ │ │ │ 1 2 3
│그 ├─┼─┼─┤
│림 │ │ │ │ 4 5 6
└──┴─┴─┴─┘
위와 같이 테이블을 만들었구요..
1,2,3,4,5,6엔 각각 가로 세로 100픽셀의 이미지가 들어가있어요..
큰이미지(가로 세로 200)의 위치에는 기본으로 1의 큰이미지가 들어가구요
마우스를 2로 가져가면 큰이미지가 2의 큰 이미지로 바뀌고
마우스를 3로 가져가면 큰이미지가 3의 큰 이미지로 바뀌게 하고 싶은데요
html은 하겠는데.. 자바스크립트에 대해 전혀 몰라서요..
도움 부탁드립니다 (__)
댓글 2
-
NZ
2003.12.05 13:21
앗...... html체크했는데 권한이 없는건가? 태그가 안먹네요 ㅡㅡ;; -
닭
2003.12.06 15:28
일단, 큰 그림의 태그에 name을 주세요.
<img src="큰그림1" name=bigImg>
그 다음 작은 그림의 태그에 각각 이렇게 적으세요.
<img src="작은그림1" onMouseOver="bigImg.src='큰그림1'">
<img src="작은그림2" onMouseOver="bigImg.src='큰그림2'">
<img src="작은그림3" onMouseOver="bigImg.src='큰그림3'">
<img src="작은그림4" onMouseOver="bigImg.src='큰그림4'">
<img src="작은그림5" onMouseOver="bigImg.src='큰그림5'">
<img src="작은그림6" onMouseOver="bigImg.src='큰그림6'">
이렇게 하시면 작은 그림에 마우스를 올리면 큰 그림 부분의 그림만 바뀝니다.
정리해보면, 아래처럼 되겠습니다.
<table cellpadding=0 cellspacing=0 border=1 align=center>
<tr>
<td rowspan=2 height=200 width=200 align=center><img src="큰그림1" name=bigImg></td>
<td height=100 width=100 align=center><img src="작은그림1" onMouseOver="bigImg.src='큰그림1'"></td>
<td height=100 width=100 align=center><img src="작은그림2" onMouseOver="bigImg.src='큰그림2'"></td>
<td height=100 width=100 align=center><img src="작은그림3" onMouseOver="bigImg.src='큰그림3'"></td>
</tr>
<tr>
<td height=100 width=100 align=center><img src="작은그림4" onMouseOver="bigImg.src='큰그림4'"></td>
<td height=100 width=100 align=center><img src="작은그림5" onMouseOver="bigImg.src='큰그림5'"></td>
<td height=100 width=100 align=center><img src="작은그림6" onMouseOver="bigImg.src='큰그림6'"></td>
</tr>
</table>