jQuery 공작소 : .attr()

<style type="text/css">
    .css_test {
        text-align : center;
    }
    .css_test img {
        cursor : pointer;
        margin : 0 5px;
        width : 40px;
    }
</style>

<div class="css_test">
    아래 그림을 눌러보세요.<br><br>
    <img src="//superkts.com/img/css/com01.gif" onclick="j_test(this)" />
    <img src="//superkts.com/img/css/com03.gif" onclick="j_test(this)" />
    <img src="//superkts.com/img/css/com05.gif" onclick="j_test(this)" />
    <img src="//superkts.com/img/css/com06.gif" onclick="j_test(this)" />
    <img src="//superkts.com/img/css/com07.gif" onclick="j_test(this)" />
</div>

<script type="text/javascript">
    function j_test(o){
        alert( $(o).attr( 'src' ) ); // 클릭한 이미지의 주소를 경고창으로 !
    }
</script>

<style type="text/css">
    .css_test {
        text-align : center;
    }
</style>

<div class="css_test">
    <img src="https://t1.daumcdn.net/cfile/tistory/262B5A4854D7351402" /><br>
    아래 버튼을 눌러보세요.<br>
    <button type="button" onclick="j_test('https://t1.daumcdn.net/cfile/tistory/2275BF38550B92383D')">사진 1</button>
    <button type="button" onclick="j_test('https://t1.daumcdn.net/cfile/tistory/246FDB38550B923705')">사진 2</button>
    <button type="button" onclick="j_test('https://t1.daumcdn.net/cfile/tistory/25469641555AC5000B')">사진 3</button>
    <button type="button" onclick="j_test('https://t1.daumcdn.net/cfile/tistory/22723C38550B923D04')">사진 4</button>
    <button type="button" onclick="j_test('https://t1.daumcdn.net/cfile/tistory/215D8239550B923E04')">사진 5</button>
</div>

<script type="text/javascript">
    function j_test(src){
        $('.css_test img').attr('src', src); // 클릭한 버튼의 이미지 보여주기
    }
</script>