[소스] 자바스크립트 이미지변경 예제 innerHTML, setAttribute 이해
2021.03.16
북마크 작성자 정보
작성일/수정일
2021-03-16 22:11:28 / 2021-03-16 22:11:28
자바스크립트 이미지변경
하단 이미지1~이미지4를 클릭 하면 상위 이미지가 변경 되는 간단한 Javascript 실무에서는 아래 ex1)와 같이 img에 id값을 설정하여 작업하지만 주어진 과제는 ex2)처럼 id img 태그 상위에 있다
<script>
function img_chg(thphoto){
/*
console.log(thphoto);
var menu_val = thphoto.getAttribute('href');
var galleryphoto = document.getElementById('photo');
galleryphoto.setAttribute('src',source);
document.getElementsByTagName("img").setAttribute("src","../../board_system_encounter/27/"+thphoto);
document.getElementById("photo" ).innerHTML = "<img src='../../board_system_encounter/27/"+thphoto+"'>";
document.getElementById("photo").setAttribute("src","../../board_system_encounter/27/"+thphoto);
*/
document.getElementsByTagName('img')[0].setAttribute("src","../../board_system_encounter/27/"+thphoto);
}
/*
예제 이미지경로
http://www.relation.co.kr/images_board/board_system_encounter/27/20110414050423us46.jpg
http://www.relation.co.kr/images_board/board_system_encounter/27/20110414020447us01.jpg
http://www.relation.co.kr/images_board/board_system_encounter/27/20110414020427us03.jpg
http://www.relation.co.kr/images_board/board_system_encounter/27/20110414030438us08.jpg
http://www.relation.co.kr/images_board/board_system_encounter/27/20110414030456us15.jpg
*/
</script>
<div class="wrap">
<div id="photo"><img src="../../board_system_encounter/27/20110414050423us46.jpg" alt="" /></div>
<ul class="menu">
<li><a href="#" onclick="img_chg('20110414020447us01.jpg'); return false;">이미지1</a></li>
<li><a href="#" onclick="img_chg('20110414020427us03.jpg'); return false;">이미지2</a></li>
<li><a href="#" onclick="img_chg('20110414030438us08.jpg'); return false;">이미지3</a></li>
<li><a href="#" onclick="img_chg('20110414030456us15.jpg'); return false;">이미지4</a></li>
</ul>
</div>
