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/2748B83D552F50A109" /><br>
    아래 버튼을 눌러보세요.<br>
    <button type="button" onclick="j_test('https://t1.daumcdn.net/cfile/tistory/264E5438555ABF490A')">사진 1</button>
    <button type="button" onclick="j_test('https://t1.daumcdn.net/cfile/tistory/2338433D552F50A40F')">사진 2</button>
    <button type="button" onclick="j_test('https://t1.daumcdn.net/cfile/tistory/27581A3854D74C4E01')">사진 3</button>
    <button type="button" onclick="j_test('https://t1.daumcdn.net/cfile/tistory/27165B4854D735151D')">사진 4</button>
    <button type="button" onclick="j_test('https://t1.daumcdn.net/cfile/tistory/2430183D552F509D16')">사진 5</button>
</div>

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