자바스크립트 이미지 변경, 코딩 풀이!

자바스크립트 맛보기 4가지

JavsScript를 사용하여 웹페이지에서 어떤 것을 할 수 있는지 대표적인 예제 4가지를 포스팅하고 있다

지난 글에서는 HTML 요소의 내용을 변경하는 것을 해보았다.

▶ 대표 예제 1번

이번 시간에는 HTML 요소의 속성을 변경하는 예제로

HTML에서 출력한 이미지를 JavsScript 를 사용하여 다른 이미지로 변경하는 코딩에 대하여 알아보자.

자바스크립트 이미지 변경하기

여기서 사용하는 JavsScript의 method, 함수, 조건문 등에 대하여 자세히 몰라도

아 이런 것들이 있구나 라는 느낌으로 맛만 보고 넘어가자.

처음부터 자세히 파고 드는 것보다 넓게 이해하는 것이 우선이다.

먼저 결과물 부터 확인해 보자 (아래 결과물의 HTML을 클릭해보세요~ 코딩이 보입니다.^^)

이제 코딩을 하나씩 풀어보자.

1. <img>태그 코딩

<p>아래 이미지를 클릭하면 다른 이미지로 변경됩니다!</p>

<img id="abc" onclick="changeimage()" src="http://img.naver.net/static/www/u/2013/0731/nmms_224940510.gif">

● <img>태그로 네이버 이미지를 화면에 출력하는 코딩이다. 

● 이 HTML요소의 아이디는 'abc'로 지정하였다.

● 그리고 onclick 했을 때의 속성값으로 changeimage( )라는 이름의 함수가 지정되어 있다.

2. <script>태그 코딩 - 여기서 부터가 JavaScript이다.

<script>

function changeimage() {

    var image = document.getElementById('abc');

    if (image.src.match("naver")) {

        image.src = "https://pixabay.com/static/uploads/photo/2015/02/13/09/47/mail-634902__180.png";

    } else {

        image.src = "http://img.naver.net/static/www/u/2013/0731/nmms_224940510.gif";

    }

}

</script>

● 함수를 정의하고 있다. 이 함수의 이름은 changeimage( )이다.

● 변수 image에 'abc' 아이디를 갖고 있는 HTML요소에 접근하게 하는 명령어를 담고 있다.

● 조건문을 사용하여 변수 image에 담긴 것에 naver라는 단어가 있으면, 사용자가 클릭 했을 때 @ 이미지를 출력하고, 그밖에 다른 것이면, 사용자가 클릭 했을 때 naver 로고 이미지를 화면에 출력해라.