이미지 갤러리 만들기

2016. 6. 2. 10:40

안개핑 Javascript

─ 소스보기 ─

─ 설명 ─

<html>

<head>

<!--

function transimg(place) {

if (place==1) dare.src="img/img1.gif";

if (place==2) dare.src="img/img2.gif";

if (place==3) dare.src="img/img3.gif";

if (place==4) dare.src="img/img4.gif";

}

// -->

</script>

</head>

<body>

<tr>

</td>

</td>

</td></tr><tr>

</td>

</td></tr></table>

</body>

</html>

<head>와 </head>사이에 아래소스를 넣는다

<!--

function transimg(place) {

if (place==1) dare.src="img/img1.gif";

if (place==2) dare.src="img/img2.gif";

if (place==3) dare.src="img/img3.gif";

if (place==4) dare.src="img/img4.gif";

}

// -->

</script>

<body>와 </body>사이에

원본 이미지가 보여 질 곳에

<img src="img/img1.gif" name="dare">

소스를 넣고

작은 이미지가 보여질 곳에

<span style="cursor:hand" onClick="transimg(1)"><img src="img/img1.gif" width="가로크기" height="세로크기"></span>

소스를 넣는다

4개 이상의 이미지를 사용 하려면
<script language="JavaScript">

><!--

function transimg(place) {>

if (place==1) dare.src="img/img1.gif";

if (place==2) dare.src="img/img2.gif";

if (place==3) dare.src="img/img3.gif";

if (place==4) dare.src="img/img4.gif";

}

// -->

</script>

여기서

if (place==4) dare.src="img/img4.gif";

부분을 늘려주면 된다

if (place==5) dare.src="img/img5.gif";
if (place==6) dare.src="img/img6.gif";

이런식으로

저작자표시 비영리 변경금지

'Javascript' 카테고리의 다른 글

흐려졌다 선명해졌다를 반복하는 이미지 (0)	2016.06.02
이미지슬라이드 (0)	2016.06.02
박스안에서 회전하는 이미지 (0)	2016.06.02
이미지 웨이브 (0)	2016.06.02
스포트라이트 효과 (0)	2016.06.02

페이스북
카카오스토리
트위터