자바스크립트 | 자바스크립트 갤러리 onclick & onmouseover 이벤트

자바스크립트 갤러리 : onclick & onmouseover 이벤트

이번에 포스팅할 주제는 자바스크립트를 이용한 이미지 갤러리 입니다.

겔러리로 많이들 사용하는건데요.. onclick & onmouseover 을 이용한 기초적인 소스입니다.

<scRIPT LANGUAGE="Javascript">
<!--
function img1()
{document.getElementById("bigimg").src = "img/gallery/1.jpg";}
//-->
</scRIPT>

위 자바스크립트 소스는img1()이 이벤트 발생시 bigimg라는 id 값에 있는 src(이미지경로)를 변경하는 소스입니다!

자 인제 html소스를 볼가요^^

<div>
<img src="1.jpg" alt="큰 이미지" width="664" id="bigimg"/>
</div>

<div>

<ul>
<li><img src="re_1.jpg" width="83" alt="작은 이미지" onclick="img1();" style="cursor:pointer;"/></li>
</ul>

</div>

아래 부분인 파란색으로 표시된 부분의 onclick 이벤트가 발생하면 img1이라는 자바스크립트가 실행이 됩니다.

그리고 위 빨간색 으로 표시된 id값 부분의 src 경로가 변경된답니다.

여기서 onclick 이벤트 말고도 onmouseover이벤트를 이용하면 마우스 오버시 이미지가 바뀌겠죠?