홈페이지 소스
[소스] 자바스크립트 이미지변경 예제 innerHTML, setAttribute 이해
자바스크립트 이미지변경
하단 이미지1~이미지4를 클릭 하면 상위 이미지가 변경 되는 간단한 Javascript 실무에서는 아래 ex1)와 같이 img에 id값을 설정하여 작업하지만 주어진 과제는 ex2)처럼 id img 태그 상위에 있다
ex1) img 태그에 id
ex2) img 상위 태그에 id
문서전체
http://relation.co.kr/images_board/board_system_publishing/243/index.html
하단 이미지1~이미지4를 클릭 하면 상위 이미지가 변경 되는 간단한 Javascript 실무에서는 아래 ex1)와 같이 img에 id값을 설정하여 작업하지만 주어진 과제는 ex2)처럼 id img 태그 상위에 있다
ex1) img 태그에 id
<div class='***' >
<img src="../../board_system_encounter/27/20110414050423us46.jpg" alt="" id="photo"/>
</div>
ex2) img 상위 태그에 id
<div class='***' id="photo">
<img src="../../board_system_encounter/27/20110414050423us46.jpg" alt="" />
</div>
문서전체
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>RELATION.CO.KR</title>
<style>
/*.banner_main { display:block; width:730px; }*/
</style>
<script language="javascript" type="text/javascript">
<!--
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>
</head>
<body>
<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>
</body>
</html>
http://relation.co.kr/images_board/board_system_publishing/243/index.html
